@byline/ui 2.4.0 → 2.4.1

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

@@ -1,218 +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
- */
-
-/**
- * Role details drawer form.
- *
- * Mirrors the admin-users update pattern: TanStack Form + Zod, blur-then-
- * change validation, diff-against-original patch, optimistic concurrency
- * via `vid`. `machine_name` is read-only here — it is captured at create
- * time and immutable thereafter.
- */
-
-import { useState } from 'react'
-import { revalidateLogic, useForm } from '@tanstack/react-form-start'
-
-import type { AdminRoleResponse } from '@byline/admin/admin-roles'
-import cx from 'classnames'
-import { z } from 'zod'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, Input, LoaderEllipsis, TextArea } from '../../../uikit.js'
-import styles from './update.module.css'
-import type { UpdateAdminRoleInput } from '../../../services/admin-services-types.js'
-
-const updateRoleSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(128, 'Name must not exceed 128 characters'),
-  description: z.string().max(2000, 'Description must not exceed 2000 characters'),
-})
-
-type UpdateRoleValues = z.infer<typeof updateRoleSchema>
-
-function defaultsFrom(role: AdminRoleResponse): UpdateRoleValues {
-  return {
-    name: role.name,
-    description: role.description ?? '',
-  }
-}
-
-/** Build a patch object containing only fields whose values differ from the original role. */
-function buildPatch(
-  values: UpdateRoleValues,
-  role: AdminRoleResponse
-): UpdateAdminRoleInput['patch'] {
-  const patch: UpdateAdminRoleInput['patch'] = {}
-  const normaliseText = (value: string): string | null => (value.trim().length > 0 ? value : null)
-  const nextDescription = normaliseText(values.description)
-  const nextName = values.name.trim()
-
-  if (nextName !== role.name) patch.name = nextName
-  if (nextDescription !== role.description) patch.description = nextDescription
-  return patch
-}
-
-interface UpdateRoleProps {
-  role: AdminRoleResponse
-  onClose?: () => void
-  onSuccess?: (role: AdminRoleResponse) => void
-}
-
-export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
-  const { updateAdminRole } = useBylineAdminServices()
-  const [formError, setFormError] = useState<string | null>(null)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-
-  const form = useForm({
-    defaultValues: defaultsFrom(role),
-    validationLogic: revalidateLogic({
-      mode: 'blur',
-      modeAfterSubmission: 'change',
-    }),
-    validators: {
-      onDynamic: updateRoleSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setFormError(null)
-      setSuccessMessage(null)
-      const patch = buildPatch(value, role)
-      if (Object.keys(patch).length === 0) {
-        setSuccessMessage('No changes to save.')
-        return
-      }
-
-      try {
-        const updated = await updateAdminRole({
-          data: { id: role.id, vid: role.vid, patch },
-        })
-        setSuccessMessage('Saved.')
-        onSuccess?.(updated)
-      } catch (err) {
-        const code = getErrorCode(err)
-        if (code === 'admin.roles.versionConflict') {
-          setFormError(
-            'This role has been modified elsewhere since you opened this form. Reload to get the latest values and try again.'
-          )
-          return
-        }
-        if (code === 'admin.roles.notFound') {
-          setFormError('This role no longer exists.')
-          return
-        }
-        setFormError('Could not save changes. Please try again.')
-      }
-    },
-  })
-
-  return (
-    <div className={cx('byline-role-update-wrap', styles.wrap)}>
-      <form
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          void form.handleSubmit()
-        }}
-        className={cx('byline-role-update-form', styles.form)}
-      >
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-        <form.Field name="name">
-          {(field) => (
-            <Input
-              label="Name"
-              id="role-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)}
-              required
-            />
-          )}
-        </form.Field>
-
-        <Input
-          label="Machine name"
-          id="role-machine-name"
-          name="machine_name"
-          value={role.machine_name}
-          readOnly
-          disabled
-          helpText="The stable code-side handle. Cannot be changed after creation."
-        />
-
-        <form.Field name="description">
-          {(field) => (
-            <TextArea
-              label="Description"
-              id="role-description"
-              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)}
-              rows={3}
-            />
-          )}
-        </form.Field>
-
-        <div className={cx('byline-role-update-actions', styles.actions)}>
-          <Button
-            type="button"
-            intent="secondary"
-            size="sm"
-            onClick={onClose}
-            className={cx('byline-role-update-action', styles.action)}
-          >
-            {successMessage ? 'Close' : 'Cancel'}
-          </Button>
-          <form.Subscribe
-            selector={(state) => ({
-              canSubmit: state.canSubmit,
-              isSubmitting: state.isSubmitting,
-            })}
-          >
-            {({ canSubmit, isSubmitting }) => (
-              <Button
-                size="sm"
-                intent="primary"
-                type="submit"
-                disabled={!canSubmit || isSubmitting}
-                className={cx('byline-role-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-users/create.module.css

@@ -1,63 +0,0 @@
-/**
- * CreateAdminUser — drawer form for creating a new admin user.
- *
- * Override handles:
- *   .byline-user-create-wrap     — outer container
- *   .byline-user-create-form     — vertical-stack form element
- *   .byline-user-create-grid     — two-column name grid (collapses on mobile)
- *   .byline-user-create-flags    — checkbox stack (enabled / verified / super)
- *   .byline-user-create-actions  — Cancel/Save row
- *   .byline-user-create-action   — buttons in the actions row
- */
-
-.wrap,
-:global(.byline-user-create-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
-
-.form,
-:global(.byline-user-create-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
-
-.grid,
-:global(.byline-user-create-grid) {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-16);
-}
-
-@media (min-width: 40rem) {
-  .grid,
-  :global(.byline-user-create-grid) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.flags,
-:global(.byline-user-create-flags) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-.actions,
-:global(.byline-user-create-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
-
-.action,
-:global(.byline-user-create-action) {
-  min-width: 4rem;
-}

package/src/admin/components/admin-users/create.tsx

@@ -1,323 +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
- */
-
-/**
- * Create-admin-user drawer form.
- *
- * Rendered inside the list-view drawer. Same TanStack Form + Zod shape
- * as the AccountDetails form — fields, blur-then-change validation,
- * form-level alerts for errors that don't map onto a single field. On
- * success the parent list-view navigates to the new user's detail page
- * so the admin can finish configuring (roles, initial enablement).
- *
- * Extension point: future props (e.g. a `roles` array once the
- * admin-roles module lands) plug in here — the list-route loader
- * already runs in parallel, so adding a side-data fetch is a one-line
- * change in the loader and a prop here.
- */
-
-import { useState } from 'react'
-import { revalidateLogic, useForm } from '@tanstack/react-form-start'
-
-import type { AdminUserResponse } from '@byline/admin/admin-users'
-import { passwordSchema } from '@byline/core/validation'
-import cx from 'classnames'
-import { z } from 'zod'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '../../../uikit.js'
-import styles from './create.module.css'
-
-const createAdminUserFormSchema = z.object({
-  email: z
-    .email({ message: 'Enter a valid email address' })
-    .min(3)
-    .max(254, 'Email must not exceed 254 characters'),
-  password: passwordSchema,
-  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'),
-  is_super_admin: z.boolean(),
-  is_enabled: z.boolean(),
-  is_email_verified: z.boolean(),
-})
-
-type CreateAdminUserValues = z.infer<typeof createAdminUserFormSchema>
-
-const initialValues: CreateAdminUserValues = {
-  email: '',
-  password: '',
-  given_name: '',
-  family_name: '',
-  username: '',
-  is_super_admin: false,
-  // Sensible defaults for an admin-created row. A brand-new admin user
-  // is almost always meant to sign in straight away; the admin picks
-  // whether they arrive pre-verified.
-  is_enabled: true,
-  is_email_verified: false,
-}
-
-function normaliseText(value: string): string | null {
-  return value.trim().length > 0 ? value : null
-}
-
-interface CreateAdminUserProps {
-  onClose?: () => void
-  /** Called on successful create with the new user so the parent can navigate. */
-  onSuccess?: (user: AdminUserResponse) => void
-}
-
-export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
-  const { createAdminUser } = useBylineAdminServices()
-  const [formError, setFormError] = useState<string | null>(null)
-
-  const form = useForm({
-    defaultValues: initialValues,
-    validationLogic: revalidateLogic({
-      mode: 'blur',
-      modeAfterSubmission: 'change',
-    }),
-    validators: {
-      onDynamic: createAdminUserFormSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setFormError(null)
-      try {
-        const created = await createAdminUser({
-          data: {
-            email: value.email,
-            password: value.password,
-            given_name: normaliseText(value.given_name),
-            family_name: normaliseText(value.family_name),
-            username: normaliseText(value.username),
-            is_super_admin: value.is_super_admin,
-            is_enabled: value.is_enabled,
-            is_email_verified: value.is_email_verified,
-          },
-        })
-        // Clear the form so the next drawer open starts fresh — the
-        // list-view shows the success as a toast and keeps the drawer
-        // closed until the user clicks "+" again.
-        form.reset(initialValues)
-        onSuccess?.(created)
-      } 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
-        }
-        setFormError('Could not create this admin user. Please try again.')
-      }
-    },
-  })
-
-  return (
-    <div className={cx('byline-user-create-wrap', styles.wrap)}>
-      <form
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          void form.handleSubmit()
-        }}
-        className={cx('byline-user-create-form', styles.form)}
-      >
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-
-        <div className={cx('byline-user-create-grid', styles.grid)}>
-          <form.Field name="given_name">
-            {(field) => (
-              <Input
-                label="Given name"
-                id="new-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="new-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>
-        </div>
-
-        <form.Field name="username">
-          {(field) => (
-            <Input
-              label="Username"
-              id="new-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."
-              autoComplete="username"
-            />
-          )}
-        </form.Field>
-
-        <form.Field name="email">
-          {(field) => (
-            <Input
-              label="Email"
-              id="new-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>
-
-        <form.Field name="password">
-          {(field) => (
-            <Input
-              label="Initial password"
-              id="new-password"
-              name={field.name}
-              type="password"
-              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="The user can change it from their own account after signing in."
-              autoComplete="new-password"
-              required
-            />
-          )}
-        </form.Field>
-
-        <div className={cx('byline-user-create-flags', styles.flags)}>
-          <form.Field name="is_enabled">
-            {(field) => (
-              <Checkbox
-                id="new-is-enabled"
-                name={field.name}
-                label="Enabled"
-                checked={field.state.value}
-                onCheckedChange={(checked) => field.handleChange(checked === true)}
-                helpText="Disabled accounts cannot sign in."
-              />
-            )}
-          </form.Field>
-
-          <form.Field name="is_email_verified">
-            {(field) => (
-              <Checkbox
-                id="new-is-email-verified"
-                name={field.name}
-                label="Email verified"
-                checked={field.state.value}
-                onCheckedChange={(checked) => field.handleChange(checked === true)}
-                helpText="Skip the verification flow for this account."
-              />
-            )}
-          </form.Field>
-
-          <form.Field name="is_super_admin">
-            {(field) => (
-              <Checkbox
-                id="new-is-super-admin"
-                name={field.name}
-                label="Super admin"
-                checked={field.state.value}
-                onCheckedChange={(checked) => field.handleChange(checked === true)}
-                helpText="Super admins bypass every ability check — grant with care."
-              />
-            )}
-          </form.Field>
-        </div>
-
-        <div className={cx('byline-user-create-actions', styles.actions)}>
-          <Button
-            type="button"
-            intent="secondary"
-            size="sm"
-            onClick={onClose}
-            className={cx('byline-user-create-action', styles.action)}
-          >
-            Cancel
-          </Button>
-          <form.Subscribe
-            selector={(state) => ({
-              canSubmit: state.canSubmit,
-              isSubmitting: state.isSubmitting,
-            })}
-          >
-            {({ canSubmit, isSubmitting }) => (
-              <Button
-                size="sm"
-                intent="primary"
-                type="submit"
-                disabled={!canSubmit || isSubmitting}
-                className={cx('byline-user-create-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 {
-  if (err && typeof err === 'object') {
-    const e = err as { code?: unknown; cause?: unknown }
-    if (typeof e.code === 'string') return e.code
-    if (e.cause && typeof e.cause === 'object' && 'code' in e.cause) {
-      const cause = e.cause as { code?: unknown }
-      if (typeof cause.code === 'string') return cause.code
-    }
-  }
-  return null
-}