@byline/ui 2.4.0 → 2.4.2

package/src/admin/components/admin-account/update.tsx

@@ -1,263 +0,0 @@
-'use client'
-
-/**
- * This Source Code is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Copyright (c) Infonomic Company Limited
- */
-
-/**
- * Self-service profile form.
- *
- * Editable surface is intentionally narrower than the admin-users
- * `update.tsx`: no `is_super_admin`, `is_enabled`, or
- * `is_email_verified` toggles. A user cannot grant themselves
- * super-admin or flip their own status — those flow through the
- * admin-users module on a privileged admin's session.
- *
- * Patch is built diff-style against the loaded row and submitted with
- * the row's `vid` so a concurrent edit elsewhere surfaces as
- * `admin.users.versionConflict` and we prompt for reload.
- */
-
-import { useState } from 'react'
-import { revalidateLogic, useForm } from '@tanstack/react-form-start'
-
-import type { AccountResponse } from '@byline/admin/admin-account'
-import cx from 'classnames'
-import { z } from 'zod'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, Input, LoaderEllipsis } from '../../../uikit.js'
-import styles from './update.module.css'
-
-const updateAccountSchema = z.object({
-  given_name: z.string().max(100, 'Given name must not exceed 100 characters'),
-  family_name: z.string().max(100, 'Family name must not exceed 100 characters'),
-  username: z.string().max(100, 'Username must not exceed 100 characters'),
-  email: z
-    .email({ message: 'Enter a valid email address' })
-    .min(3)
-    .max(254, 'Email must not exceed 254 characters'),
-})
-
-type UpdateAccountValues = z.infer<typeof updateAccountSchema>
-
-function defaultsFrom(account: AccountResponse): UpdateAccountValues {
-  return {
-    given_name: account.given_name ?? '',
-    family_name: account.family_name ?? '',
-    username: account.username ?? '',
-    email: account.email,
-  }
-}
-
-function buildPatch(values: UpdateAccountValues, account: AccountResponse) {
-  const patch: {
-    given_name?: string | null
-    family_name?: string | null
-    username?: string | null
-    email?: string
-  } = {}
-  const normaliseText = (value: string): string | null => (value.trim().length > 0 ? value : null)
-  const nextGiven = normaliseText(values.given_name)
-  const nextFamily = normaliseText(values.family_name)
-  const nextUsername = normaliseText(values.username)
-  if (nextGiven !== account.given_name) patch.given_name = nextGiven
-  if (nextFamily !== account.family_name) patch.family_name = nextFamily
-  if (nextUsername !== account.username) patch.username = nextUsername
-  if (values.email !== account.email) patch.email = values.email
-  return patch
-}
-
-interface UpdateAccountProps {
-  account: AccountResponse
-  onClose?: () => void
-  onSuccess?: (account: AccountResponse) => void
-}
-
-export function UpdateAccount({ account, onClose, onSuccess }: UpdateAccountProps) {
-  const { updateAccount } = useBylineAdminServices()
-  const [formError, setFormError] = useState<string | null>(null)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-
-  const form = useForm({
-    defaultValues: defaultsFrom(account),
-    validationLogic: revalidateLogic({
-      mode: 'blur',
-      modeAfterSubmission: 'change',
-    }),
-    validators: {
-      onDynamic: updateAccountSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setFormError(null)
-      setSuccessMessage(null)
-      const patch = buildPatch(value, account)
-      if (Object.keys(patch).length === 0) {
-        setSuccessMessage('No changes to save.')
-        return
-      }
-      try {
-        const updated = await updateAccount({ data: { vid: account.vid, patch } })
-        setSuccessMessage('Saved.')
-        onSuccess?.(updated)
-      } catch (err) {
-        const code = getErrorCode(err)
-        if (code === 'admin.users.emailInUse') {
-          form.setFieldMeta('email', (meta) => ({
-            ...meta,
-            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
-            errors: ['This email is already in use.'],
-          }))
-          return
-        }
-        if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.'
-          )
-          return
-        }
-        if (code === 'admin.account.notFound') {
-          setFormError('Your admin account could not be found. Please sign in again.')
-          return
-        }
-        setFormError('Could not save changes. Please try again.')
-      }
-    },
-  })
-
-  return (
-    <div className={cx('byline-account-update-wrap', styles.wrap)}>
-      <form
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          void form.handleSubmit()
-        }}
-        className={cx('byline-account-update-form', styles.form)}
-      >
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-        <form.Field name="given_name">
-          {(field) => (
-            <Input
-              label="Given name"
-              id="given_name"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.currentTarget.value)}
-              error={field.state.meta.errors.length > 0}
-              errorText={firstError(field.state.meta.errors)}
-              autoComplete="given-name"
-            />
-          )}
-        </form.Field>
-
-        <form.Field name="family_name">
-          {(field) => (
-            <Input
-              label="Family name"
-              id="family_name"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.currentTarget.value)}
-              error={field.state.meta.errors.length > 0}
-              errorText={firstError(field.state.meta.errors)}
-              autoComplete="family-name"
-            />
-          )}
-        </form.Field>
-
-        <form.Field name="username">
-          {(field) => (
-            <Input
-              label="Username"
-              id="username"
-              name={field.name}
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.currentTarget.value)}
-              error={field.state.meta.errors.length > 0}
-              errorText={firstError(field.state.meta.errors)}
-              helpText="Optional. Leave blank to clear."
-              autoComplete="username"
-            />
-          )}
-        </form.Field>
-
-        <form.Field name="email">
-          {(field) => (
-            <Input
-              label="Email"
-              id="email"
-              name={field.name}
-              type="email"
-              value={field.state.value}
-              onBlur={field.handleBlur}
-              onChange={(e) => field.handleChange(e.currentTarget.value)}
-              error={field.state.meta.errors.length > 0}
-              errorText={firstError(field.state.meta.errors)}
-              autoComplete="email"
-              required
-            />
-          )}
-        </form.Field>
-
-        <div className={cx('byline-account-update-actions', styles.actions)}>
-          <Button
-            type="button"
-            intent="secondary"
-            size="sm"
-            onClick={onClose}
-            className={cx('byline-account-update-action', styles.action)}
-          >
-            {successMessage ? 'Close' : 'Cancel'}
-          </Button>
-          <form.Subscribe
-            selector={(state) => ({
-              canSubmit: state.canSubmit,
-              isSubmitting: state.isSubmitting,
-              isDirty: state.isDirty,
-            })}
-          >
-            {({ canSubmit, isSubmitting }) => (
-              <Button
-                size="sm"
-                intent="primary"
-                type="submit"
-                disabled={!canSubmit || isSubmitting}
-                className={cx('byline-account-update-action', styles.action)}
-              >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
-              </Button>
-            )}
-          </form.Subscribe>
-        </div>
-      </form>
-    </div>
-  )
-}
-
-function firstError(errors: readonly unknown[]): string | undefined {
-  for (const err of errors) {
-    if (typeof err === 'string') return err
-    if (err && typeof err === 'object' && 'message' in err) {
-      const msg = (err as { message?: unknown }).message
-      if (typeof msg === 'string') return msg
-    }
-  }
-  return undefined
-}
-
-function getErrorCode(err: unknown): string | null {
-  return typeof (err as { code?: unknown })?.code === 'string'
-    ? (err as { code: string }).code
-    : null
-}

package/src/admin/components/admin-permissions/inspector.module.css

@@ -1,326 +0,0 @@
-/**
- * AbilitiesInspector — registry inspector with lazy-loaded role/user matrices.
- *
- * Override handles:
- *   .byline-inspector-head           — title row
- *   .byline-inspector-title          — main heading
- *   .byline-inspector-count-pill     — total-count pill
- *   .byline-inspector-lead           — paragraph-style description
- *   .byline-inspector-empty          — empty-state paragraph
- *   .byline-inspector-groups         — vertical group stack
- *   .byline-inspector-group          — group <details> card
- *   .byline-inspector-group-summary  — group summary row
- *   .byline-inspector-group-name     — group display name
- *   .byline-inspector-group-count    — abilities-in-group count
- *   .byline-inspector-group-body     — group body
- *   .byline-inspector-row            — single ability row
- *   .byline-inspector-row-head       — header inside a row
- *   .byline-inspector-row-info       — info column inside row-head
- *   .byline-inspector-row-meta       — code + source-badge row
- *   .byline-inspector-row-key        — ability key code pill
- *   .byline-inspector-row-source     — source badge base
- *   .byline-inspector-row-source-collection
- *   .byline-inspector-row-source-admin
- *   .byline-inspector-row-source-plugin
- *   .byline-inspector-row-source-core
- *   .byline-inspector-row-source-unknown
- *   .byline-inspector-row-label      — ability display name
- *   .byline-inspector-row-description — ability description
- *   .byline-inspector-loader         — loading row inside expanded row
- *   .byline-inspector-matrix         — two-column roles/users panel
- *   .byline-inspector-matrix-title   — column heading
- *   .byline-inspector-matrix-empty   — empty-list message
- *   .byline-inspector-matrix-list    — bare list
- *   .byline-inspector-matrix-item    — list item
- *   .byline-inspector-matrix-name    — bold name span
- *   .byline-inspector-matrix-machine — muted machine-name suffix
- */
-
-.head,
-:global(.byline-inspector-head) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-12);
-  margin-bottom: var(--spacing-16);
-}
-
-.title,
-:global(.byline-inspector-title) {
-  margin: 0;
-}
-
-.count-pill,
-:global(.byline-inspector-count-pill) {
-  background-color: var(--gray-25);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  padding: var(--spacing-4) var(--spacing-8);
-  font-size: var(--font-size-sm);
-  border-radius: var(--border-radius-sm);
-}
-
-.lead,
-:global(.byline-inspector-lead) {
-  margin-bottom: var(--spacing-16);
-  font-size: var(--font-size-sm);
-}
-
-.empty,
-:global(.byline-inspector-empty) {
-  /* Inherits .muted colour from sibling utility class. */
-}
-
-.groups,
-:global(.byline-inspector-groups) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-.group,
-:global(.byline-inspector-group) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-}
-
-/* Hide the default summary disclosure marker (browser-specific). */
-.group :global(summary)::-webkit-details-marker {
-  display: none;
-}
-
-.group-summary,
-:global(.byline-inspector-group-summary) {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-12);
-  list-style: none;
-}
-
-.group-name,
-:global(.byline-inspector-group-name) {
-  font-weight: var(--font-weight-medium);
-}
-
-.group-count,
-:global(.byline-inspector-group-count) {
-  font-size: var(--font-size-xs);
-}
-
-.group-body,
-:global(.byline-inspector-group-body) {
-  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
-}
-
-.row,
-:global(.byline-inspector-row) {
-  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  padding: var(--spacing-8) 0;
-}
-
-.row:first-child,
-:global(.byline-inspector-row):first-child {
-  border-top: 0;
-}
-
-.row-head,
-:global(.byline-inspector-row-head) {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-12);
-}
-
-.row-info,
-:global(.byline-inspector-row-info) {
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.row-meta,
-:global(.byline-inspector-row-meta) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-
-.row-key,
-:global(.byline-inspector-row-key) {
-  background-color: var(--gray-50);
-  padding: 0.125rem 0.375rem;
-  font-size: var(--font-size-xs);
-  border-radius: var(--border-radius-sm);
-}
-
-.row-source,
-:global(.byline-inspector-row-source) {
-  padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-radius: var(--border-radius-sm);
-  background-color: var(--gray-100);
-  color: var(--gray-800);
-}
-
-.row-source-collection,
-:global(.byline-inspector-row-source-collection) {
-  background-color: var(--gray-100);
-  color: var(--gray-800);
-}
-
-.row-source-admin,
-:global(.byline-inspector-row-source-admin) {
-  background-color: var(--blue-50);
-  color: var(--blue-700);
-}
-
-.row-source-plugin,
-:global(.byline-inspector-row-source-plugin) {
-  /* No purple token in uikit; fall back to primary scale. */
-  background-color: var(--primary-50);
-  color: var(--primary-700);
-}
-
-.row-source-core,
-:global(.byline-inspector-row-source-core) {
-  background-color: var(--green-50);
-  color: var(--green-700);
-}
-
-.row-source-unknown,
-:global(.byline-inspector-row-source-unknown) {
-  background-color: var(--gray-50);
-  color: var(--gray-600);
-}
-
-.row-label,
-:global(.byline-inspector-row-label) {
-  margin: var(--spacing-4) 0 0 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.row-description,
-:global(.byline-inspector-row-description) {
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
-}
-
-.loader,
-:global(.byline-inspector-loader) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-8);
-  font-size: var(--font-size-sm);
-}
-
-.matrix,
-:global(.byline-inspector-matrix) {
-  margin-top: var(--spacing-8);
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-12);
-  padding: var(--spacing-12);
-  background-color: var(--canvas-25);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-}
-
-@media (min-width: 40rem) {
-  .matrix,
-  :global(.byline-inspector-matrix) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.matrix-title,
-:global(.byline-inspector-matrix-title) {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-bold);
-}
-
-.matrix-empty,
-:global(.byline-inspector-matrix-empty) {
-  margin: 0;
-  font-style: italic;
-  font-size: var(--font-size-sm);
-}
-
-.matrix-list,
-:global(.byline-inspector-matrix-list) {
-  margin: 0;
-  list-style: none;
-  padding: 0;
-  font-size: var(--font-size-sm);
-}
-
-.matrix-item,
-:global(.byline-inspector-matrix-item) {
-  margin-bottom: var(--spacing-4);
-}
-
-.matrix-name,
-:global(.byline-inspector-matrix-name) {
-  font-weight: var(--font-weight-medium);
-}
-
-:is([data-theme="dark"], :global(.dark)) {
-  .count-pill,
-  :global(.byline-inspector-count-pill) {
-    background-color: var(--canvas-700);
-    border-color: var(--gray-700);
-  }
-
-  .group,
-  :global(.byline-inspector-group) {
-    border-color: var(--gray-700);
-  }
-
-  .row,
-  :global(.byline-inspector-row) {
-    border-top-color: var(--gray-700);
-  }
-
-  .row-key,
-  :global(.byline-inspector-row-key) {
-    background-color: var(--canvas-800);
-  }
-
-  .row-source-collection,
-  :global(.byline-inspector-row-source-collection) {
-    background-color: var(--canvas-700);
-    color: var(--gray-200);
-  }
-
-  .row-source-admin,
-  :global(.byline-inspector-row-source-admin) {
-    background-color: var(--blue-900);
-    color: var(--blue-200);
-  }
-
-  .row-source-plugin,
-  :global(.byline-inspector-row-source-plugin) {
-    background-color: var(--primary-900);
-    color: var(--primary-200);
-  }
-
-  .row-source-core,
-  :global(.byline-inspector-row-source-core) {
-    background-color: var(--green-900);
-    color: var(--green-200);
-  }
-
-  .row-source-unknown,
-  :global(.byline-inspector-row-source-unknown) {
-    background-color: var(--canvas-800);
-    color: var(--gray-400);
-  }
-
-  .matrix,
-  :global(.byline-inspector-matrix) {
-    background-color: var(--canvas-800);
-    border-color: var(--gray-700);
-  }
-}