feat(ui): Reverification block views

.changeset/calm-pandas-verify.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -39,6 +39,12 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
   },
   blocks: {
     destructive: dynamic(() => import('../stories/destructive.mdx')),
+    'reverification-password': dynamic(() => import('../stories/reverification-password.mdx')),
+    'reverification-passkey': dynamic(() => import('../stories/reverification-passkey.mdx')),
+    'reverification-otp': dynamic(() => import('../stories/reverification-otp.mdx')),
+    'reverification-backup-code': dynamic(() => import('../stories/reverification-backup-code.mdx')),
+    'reverification-method-picker': dynamic(() => import('../stories/reverification-method-picker.mdx')),
+    'reverification-help': dynamic(() => import('../stories/reverification-help.mdx')),
   },
   components: {
     avatar: dynamic(() => import('../stories/avatar.mdx')),

packages/swingset/src/lib/registry.ts

@@ -74,7 +74,6 @@ import {
   Disabled as OtpComponentDisabled,
   Error as OtpComponentError,
   meta as otpComponentMeta,
-  Sizes as OtpComponentSizes,
   Success as OtpComponentSuccess,
 } from '../stories/otp.component.stories';
 import { meta as otpMeta } from '../stories/otp.stories';
@@ -85,6 +84,31 @@ import {
   Placement as PopoverComponentPlacement,
 } from '../stories/popover.component.stories';
 import { meta as popoverMeta } from '../stories/popover.stories';
+import {
+  Default as ReverificationBackupCodeDefault,
+  meta as reverificationBackupCodeMeta,
+} from '../stories/reverification-backup-code.stories';
+import {
+  Default as ReverificationHelpDefault,
+  meta as reverificationHelpMeta,
+} from '../stories/reverification-help.stories';
+import {
+  Default as ReverificationMethodPickerDefault,
+  meta as reverificationMethodPickerMeta,
+} from '../stories/reverification-method-picker.stories';
+import {
+  Authenticator as ReverificationOTPAuthenticator,
+  Default as ReverificationOTPDefault,
+  meta as reverificationOTPMeta,
+} from '../stories/reverification-otp.stories';
+import {
+  Default as ReverificationPasskeyDefault,
+  meta as reverificationPasskeyMeta,
+} from '../stories/reverification-passkey.stories';
+import {
+  Default as ReverificationPasswordDefault,
+  meta as reverificationPasswordMeta,
+} from '../stories/reverification-password.stories';
 import {
   Default as ScrollAreaDefault,
   Gutter as ScrollAreaGutter,
@@ -267,7 +291,6 @@ const menuComponentModule: StoryModule = { meta: menuComponentMeta, Default: Men
 const otpComponentModule: StoryModule = {
   meta: otpComponentMeta,
   Default: OtpComponentDefault,
-  Sizes: OtpComponentSizes,
   Success: OtpComponentSuccess,
   Error: OtpComponentError,
   Disabled: OtpComponentDisabled,
@@ -395,6 +418,31 @@ const destructiveModule: StoryModule = {
   WithError: DestructiveWithError,
 };
 
+const reverificationPasswordModule: StoryModule = {
+  meta: reverificationPasswordMeta,
+  Default: ReverificationPasswordDefault,
+};
+const reverificationPasskeyModule: StoryModule = {
+  meta: reverificationPasskeyMeta,
+  Default: ReverificationPasskeyDefault,
+};
+const reverificationOTPModule: StoryModule = {
+  meta: reverificationOTPMeta,
+  Default: ReverificationOTPDefault,
+  Authenticator: ReverificationOTPAuthenticator,
+};
+const reverificationBackupCodeModule: StoryModule = {
+  meta: reverificationBackupCodeMeta,
+  Default: ReverificationBackupCodeDefault,
+};
+const reverificationMethodPickerModule: StoryModule = {
+  meta: reverificationMethodPickerMeta,
+  Default: ReverificationMethodPickerDefault,
+};
+const reverificationHelpModule: StoryModule = {
+  meta: reverificationHelpMeta,
+  Default: ReverificationHelpDefault,
+};
 export const registry: StoryModule[] = [
   // User Button
   userButtonModule,
@@ -419,6 +467,12 @@ export const registry: StoryModule[] = [
   userProfileDeleteSectionModule,
   // Blocks — flows assembled from components, wired by the caller's machine.
   destructiveModule,
+  reverificationPasswordModule,
+  reverificationPasskeyModule,
+  reverificationOTPModule,
+  reverificationBackupCodeModule,
+  reverificationMethodPickerModule,
+  reverificationHelpModule,
   // Components
   avatarModule,
   badgeModule,

packages/swingset/src/stories/card.component.stories.tsx

@@ -32,10 +32,7 @@ function knobsAsProps(props: Record<string, unknown>) {
 
 export function Default(props: Record<string, unknown>) {
   return (
-    <Card.Root
-      {...knobsAsProps(props)}
-      style={{ maxWidth: 400 }}
-    >
+    <Card.Root {...knobsAsProps(props)}>
       <Card.Header>
         <Card.Title>Login to your account</Card.Title>
         <Card.Description>Enter your email below to login to your account</Card.Description>

packages/swingset/src/stories/otp.component.mdx

@@ -72,13 +72,6 @@ Inside a `Field.Root`, the field's `disabled` and `invalid` flow into the boxes,
 
 ## Examples
 
-### Sizes
-
-<Story
-  name='Sizes'
-  storyModule={OtpStories}
-/>
-
 ### Success
 
 <Story
@@ -107,4 +100,4 @@ Inside a `Field.Root`, the field's `disabled` and `invalid` flow into the boxes,
 | Root | `.cl-otp`         | The `role="group"` holding the boxes.          |
 | Slot | `.cl-otp-slot`    | One `input` per character, one box in the row. |
 
-Both carry `data-size` and `data-status`, plus `data-disabled` when disabled. Each slot additionally carries the primitive's `data-active` (holds focus) and `data-filled` (holds a character).
+Both carry `data-status`, plus `data-disabled` when disabled. Each slot additionally carries the primitive's `data-active` (holds focus) and `data-filled` (holds a character).

packages/swingset/src/stories/otp.component.stories.tsx

@@ -14,11 +14,9 @@ export const meta: StoryMeta = {
   source: 'packages/ui/src/mosaic/components/otp/otp.tsx',
   styles: {
     _variants: {
-      size: { sm: {}, md: {}, lg: {} },
       status: { neutral: {}, success: {}, error: {} },
     },
     _defaultVariants: {
-      size: 'md',
       status: 'neutral',
     },
   },
@@ -43,28 +41,6 @@ export function Default(props: Record<string, unknown>) {
   );
 }
 
-export function Sizes() {
-  return (
-    <div style={{ display: 'grid', gap: 16, justifyItems: 'start' }}>
-      <Otp
-        size='sm'
-        defaultValue='123'
-        aria-label='Small code'
-      />
-      <Otp
-        size='md'
-        defaultValue='123'
-        aria-label='Medium code'
-      />
-      <Otp
-        size='lg'
-        defaultValue='123'
-        aria-label='Large code'
-      />
-    </div>
-  );
-}
-
 export function Success() {
   return (
     <Field.Root style={stackStyles}>

packages/swingset/src/stories/reverification-backup-code.mdx

@@ -0,0 +1,7 @@
+import * as Stories from './reverification-backup-code.stories';
+
+# ReverificationBackupCode
+
+The backup-code card content used by the reverification flow.
+
+<Story name='Default' storyModule={Stories} composition={[{ name: 'Card', href: '/components/card', layer: 'Components' }]} />

packages/swingset/src/stories/reverification-backup-code.stories.tsx

@@ -0,0 +1,39 @@
+import { ReverificationBackupCode } from '@clerk/ui/mosaic/blocks/reverification';
+import React from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { ReverificationStoryCard } from './reverification-story-card';
+
+export { default as __source } from './reverification-backup-code.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Blocks',
+  title: 'ReverificationBackupCode',
+  label: 'Backup code',
+  navigation: { category: 'Reverification' },
+  source: 'packages/ui/src/mosaic/blocks/reverification/reverification-backup-code.tsx',
+};
+
+export function Default() {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <ReverificationStoryCard>
+      <ReverificationBackupCode
+        messages={{
+          title: 'Enter a backup code',
+          description: 'Enter the backup code you received when setting up two-step authentication',
+          fieldLabel: 'Backup code',
+          secondaryActionLabel: 'Cancel',
+          primaryActionLabel: 'Continue',
+          pendingLabel: 'Verifying',
+        }}
+        value={value}
+        onValueChange={setValue}
+        onSubmit={() => undefined}
+        onCancel={() => setValue('')}
+      />
+    </ReverificationStoryCard>
+  );
+}

packages/swingset/src/stories/reverification-help.mdx

@@ -0,0 +1,7 @@
+import * as Stories from './reverification-help.stories';
+
+# ReverificationHelp
+
+The help card content used by the reverification flow.
+
+<Story name='Default' storyModule={Stories} composition={[{ name: 'Card', href: '/components/card', layer: 'Components' }]} />

packages/swingset/src/stories/reverification-help.stories.tsx

@@ -0,0 +1,33 @@
+import { ReverificationHelp } from '@clerk/ui/mosaic/blocks/reverification';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { ReverificationStoryCard } from './reverification-story-card';
+
+export { default as __source } from './reverification-help.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Blocks',
+  title: 'ReverificationHelp',
+  label: 'Help',
+  navigation: { category: 'Reverification' },
+  source: 'packages/ui/src/mosaic/blocks/reverification/reverification-help.tsx',
+};
+
+export function Default() {
+  return (
+    <ReverificationStoryCard>
+      <ReverificationHelp
+        messages={{
+          title: 'Get help',
+          description:
+            'If you have trouble verifying your account, email us and we will work with you to restore access as soon as possible.',
+          backButton: 'Back',
+          supportButton: 'Email support',
+        }}
+        onEmailSupport={() => undefined}
+        onBack={() => undefined}
+      />
+    </ReverificationStoryCard>
+  );
+}

packages/swingset/src/stories/reverification-method-picker.mdx

@@ -0,0 +1,7 @@
+import * as Stories from './reverification-method-picker.stories';
+
+# ReverificationMethodPicker
+
+The alternative-method picker content used by the reverification flow.
+
+<Story name='Default' storyModule={Stories} composition={[{ name: 'Card', href: '/components/card', layer: 'Components' }]} />

packages/swingset/src/stories/reverification-method-picker.stories.tsx

@@ -0,0 +1,44 @@
+import { ReverificationMethodPicker } from '@clerk/ui/mosaic/blocks/reverification';
+import React from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { ReverificationStoryCard } from './reverification-story-card';
+
+export { default as __source } from './reverification-method-picker.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Blocks',
+  title: 'ReverificationMethodPicker',
+  label: 'Method picker',
+  navigation: { category: 'Reverification' },
+  source: 'packages/ui/src/mosaic/blocks/reverification/reverification-method-picker.tsx',
+};
+
+export function Default() {
+  const [pendingMethodId, setPendingMethodId] = React.useState<string>();
+
+  return (
+    <ReverificationStoryCard>
+      <ReverificationMethodPicker
+        messages={{
+          title: 'Use another method',
+          description: 'Facing issues? You can use any of these methods for verification.',
+          backButton: 'Back',
+          helpText: 'Don’t have any of these?',
+          helpButton: 'Get help',
+        }}
+        methods={[
+          { id: 'password', label: 'Continue with your password', icon: 'security-lock-square' },
+          { id: 'phone', label: 'Send SMS code to ••• ••• 1234', icon: 'security-phone' },
+          { id: 'totp', label: 'Use your authenticator app', icon: 'security-authenticator' },
+          { id: 'passkey', label: 'Use your passkey', icon: 'security-passkey' },
+        ]}
+        pendingMethodId={pendingMethodId}
+        onSelect={setPendingMethodId}
+        onHelp={() => undefined}
+        onBack={() => setPendingMethodId(undefined)}
+      />
+    </ReverificationStoryCard>
+  );
+}

packages/swingset/src/stories/reverification-otp.mdx

@@ -0,0 +1,9 @@
+import * as Stories from './reverification-otp.stories';
+
+# ReverificationOTP
+
+The one-time-code card content used by the reverification flow.
+
+<Story name='Default' storyModule={Stories} composition={[{ name: 'Card', href: '/components/card', layer: 'Components' }]} />
+
+<Story name='Authenticator' storyModule={Stories} composition={[{ name: 'Card', href: '/components/card', layer: 'Components' }]} />