@unchainedshop/admin-ui 5.0.0-alpha.2 → 5.0.0-alpha.4

package/README.md

@@ -116,6 +116,118 @@ import { fastifyRouter } from '@unchainedshop/admin-ui/fastify';
 fastify.register(fastifyRouter, { prefix: '/admin' });
 ```
 
+### 🎨 Custom Theming
+
+The admin UI uses semantic CSS custom property tokens for all surface, text, and border colors. Engine consumers can override these at runtime — no rebuild required.
+
+Pass a `theme` object with `light` and/or `dark` overrides when connecting the admin UI:
+
+```typescript
+await connect(fastify, platform, {
+  adminUI: {
+    prefix: '/',
+    theme: {
+      light: {
+        accent: '#8b5cf6',
+        'accent-hover': '#7c3aed',
+        'focus-ring': '#8b5cf6',
+        'text-on-accent': '#ffffff',
+      },
+      dark: {
+        accent: '#a78bfa',
+        'accent-hover': '#8b5cf6',
+        'focus-ring': '#a78bfa',
+        'text-on-accent': '#ffffff',
+      },
+    },
+  },
+});
+```
+
+You only need to include the tokens you want to override — unset tokens use the built-in defaults. Each key maps to a `--token-{key}` CSS variable. The engine serves these as `/admin-ui-theme.css` which loads before first paint (no flicker).
+
+Available tokens:
+
+| Token | Light default | Dark default | Description |
+|-------|-------------|-------------|-------------|
+| `surface` | `#ffffff` | `#1e293b` | Main backgrounds (cards, modals) |
+| `surface-subtle` | `#f8fafc` | `#0f172a` | Page backgrounds |
+| `surface-raised` | `#f1f5f9` | `#334155` | Hover states, raised elements |
+| `surface-input` | `#ffffff` | `#0f172a` | Form input backgrounds |
+| `border` | `#cbd5e1` | `#475569` | Default borders |
+| `border-subtle` | `#e2e8f0` | `#334155` | Subtle/secondary borders |
+| `text-primary` | `#0f172a` | `#f1f5f9` | Headings, primary text |
+| `text-secondary` | `#475569` | `#94a3b8` | Labels, secondary text |
+| `text-muted` | `#64748b` | `#64748b` | Captions, placeholders |
+| `accent` | `#1e293b` | `#475569` | Primary buttons, active elements |
+| `accent-hover` | `#020617` | `#64748b` | Hover state for accent |
+| `focus-ring` | `#1e293b` | `#94a3b8` | Focus ring color for interactive elements |
+| `text-on-accent` | `#ffffff` | `#ffffff` | Text on accent-colored backgrounds |
+| `danger` | `#f43f5e` | `#fb7185` | Error states, destructive actions |
+| `danger-surface` | `#fff1f2` | `oklch(...)` | Danger background |
+| `success` | `#10b981` | `#34d399` | Success states |
+| `warning` | `#f59e0b` | `#fbbf24` | Warning states |
+
+---
+
+### 🧩 SDK — Using UI Primitives in Custom Apps
+
+The admin UI exports its component library, form system, hooks, and providers as separate entry points. This allows custom admin pages, plugins, or white-label apps to reuse the design system without forking.
+
+```bash
+npm install @unchainedshop/admin-ui
+```
+
+**Available imports:**
+
+```typescript
+// UI primitives — Button, Badge, Combobox, Card, Tab, etc.
+import { Button, Badge, Loading, Tab, Accordion } from '@unchainedshop/admin-ui/ui';
+
+// Form components — TextField, SelectField, Combobox, CheckboxField, etc.
+import { TextField, SelectField, Combobox, SubmitButton } from '@unchainedshop/admin-ui/form';
+
+// Hooks — useTheme, useModal, useField, useForm, etc.
+import { useTheme, useModal, useField, useForm } from '@unchainedshop/admin-ui/hooks';
+
+// Providers — ThemeWrapper, ModalWrapper for app composition
+import { ThemeWrapper, ModalWrapper } from '@unchainedshop/admin-ui/providers';
+
+// Modal system — Modal, AlertMessage, DangerMessage
+import { Modal, AlertMessage, DangerMessage, useModal } from '@unchainedshop/admin-ui/modal';
+
+// Styles — import the full design token stylesheet
+import '@unchainedshop/admin-ui/styles';
+```
+
+**Building a custom admin page:**
+
+```tsx
+import { ThemeWrapper, ModalWrapper } from '@unchainedshop/admin-ui/providers';
+import { Button, Card, CardContent } from '@unchainedshop/admin-ui/ui';
+import { TextField, SubmitButton } from '@unchainedshop/admin-ui/form';
+import '@unchainedshop/admin-ui/styles';
+
+export default function CustomPage() {
+  return (
+    <ThemeWrapper>
+      <ModalWrapper>
+        <Card>
+          <CardContent>
+            <h1>My Custom Admin Page</h1>
+            <Button variant="primary" text="Click me" />
+          </CardContent>
+        </Card>
+      </ModalWrapper>
+    </ThemeWrapper>
+  );
+}
+```
+
+**Peer dependencies:** React 19+, Next.js 15+ (for components that use `next/link` and `next/router`).
+
+**Build the SDK:** `npm run build:sdk` generates the `dist/` directory with ESM bundles and TypeScript declarations.
+
 ---
 
 ## 📝 Development

package/dist/chunk-45H2WVIC.js

@@ -0,0 +1,51 @@
+import { gql } from '@apollo/client';
+import { useMutation } from '@apollo/client/react';
+
+// src/modules/common/hooks/useConfirmMediaUpload.ts
+var ConfirmMediaUploadMutation = gql`
+  mutation ConfirmMediaUpload(
+    $mediaUploadTicketId: ID!
+    $size: Int!
+    $type: String!
+  ) {
+    confirmMediaUpload(
+      mediaUploadTicketId: $mediaUploadTicketId
+      size: $size
+      type: $type
+    ) {
+      _id
+      name
+      type
+      size
+      url
+    }
+  }
+`;
+var useConfirmMediaUpload = (options = {}) => {
+  const [confirmMediaUploadMutation] = useMutation(ConfirmMediaUploadMutation, options);
+  const confirmMediaUpload = async ({ mediaUploadTicketId, size, type }) => {
+    return confirmMediaUploadMutation({
+      variables: { mediaUploadTicketId, size, type }
+    });
+  };
+  return {
+    confirmMediaUpload
+  };
+};
+var useConfirmMediaUpload_default = useConfirmMediaUpload;
+
+// src/modules/common/utils/PUTMedia.ts
+var PUTMedia = async (file, url) => {
+  const response = await fetch(url, {
+    method: "PUT",
+    // headers: { 'Content-Type': 'application/json' },
+    body: file
+  });
+  if (response.ok) {
+    return Promise.resolve({});
+  }
+  return Promise.reject(new Error(response.statusText));
+};
+var PUTMedia_default = PUTMedia;
+
+export { PUTMedia_default, useConfirmMediaUpload_default };

package/dist/chunk-4VNS5WPM.js

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export { __commonJS, __export, __require, __toESM };

package/dist/chunk-54DKBWXV.js

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+// src/modules/common/hooks/useLocalStorage.ts
+var useLocalStorage = (key, initialValue) => {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      if (typeof window !== "undefined" && window.localStorage) {
+        const item = window.localStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+      }
+      return initialValue;
+    } catch (error) {
+      return initialValue;
+    }
+  });
+  const setValue = (value) => {
+    try {
+      if (typeof window !== "undefined" && window.localStorage) {
+        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      } else {
+        console.error("localStorage is not available");
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  return [storedValue, setValue];
+};
+var useLocalStorage_default = useLocalStorage;
+
+export { useLocalStorage_default };