perf: replace docs step barrel imports

e2e/no-step-barrel-imports.test.ts

@@ -0,0 +1,74 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { dirname, extname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { expect, test } from '@playwright/test'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const repoRoot = join(__dirname, '..')
+const srcDir = join(repoRoot, 'src')
+const stepsBarrelDir = join(srcDir, 'components', 'guides', 'steps')
+const SOURCE_EXTENSIONS = new Set(['.mdx', '.ts', '.tsx'])
+
+function findSourceFiles(dir: string): string[] {
+  const results: string[] = []
+
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const full = join(dir, entry.name)
+
+    if (entry.isDirectory() && entry.name !== 'node_modules') {
+      results.push(...findSourceFiles(full))
+      continue
+    }
+
+    if (SOURCE_EXTENSIONS.has(extname(entry.name))) {
+      results.push(full)
+    }
+  }
+
+  return results
+}
+
+function findImports(content: string): string[] {
+  const imports: string[] = []
+
+  for (const match of content.matchAll(/from\s+['"]([^'"]+)['"]/g)) {
+    imports.push(match[1])
+  }
+
+  for (const match of content.matchAll(/import\s+['"]([^'"]+)['"]/g)) {
+    imports.push(match[1])
+  }
+
+  return imports
+}
+
+function resolvesToStepsBarrel(file: string, importPath: string): boolean {
+  if (!importPath.startsWith('.')) return false
+
+  const resolved = resolve(dirname(file), importPath)
+  return resolved === stepsBarrelDir || resolved === join(stepsBarrelDir, 'index')
+}
+
+test('no imports from the guides steps barrel', () => {
+  const files = findSourceFiles(srcDir)
+  const violations: string[] = []
+
+  for (const file of files) {
+    const content = readFileSync(file, 'utf-8')
+    const imports = findImports(content)
+
+    for (const importPath of imports) {
+      if (resolvesToStepsBarrel(file, importPath)) {
+        violations.push(`${relative(repoRoot, file)} -> ${importPath}`)
+      }
+    }
+  }
+
+  expect(
+    violations,
+    [
+      'Found imports from the guides steps barrel. Import the specific step modules instead:',
+      ...violations.map((entry) => `  - ${entry}`),
+    ].join('\n'),
+  ).toHaveLength(0)
+})

src/pages/accounts/index.mdx

@@ -6,7 +6,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { AddFunds } from '../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../components/guides/steps/auth/Connect.tsx'
+import { SendPayment } from '../../components/guides/steps/payments/SendPayment.tsx'
 import IconGitHub from '~icons/simple-icons/github'
 import { StaticMermaidDiagram } from '../../components/StaticMermaidDiagram'
 
@@ -21,9 +23,9 @@ The Tempo Accounts SDK is a TypeScript library for applications and wallets to c
 Try sign in and make a payment on Tempo using the Accounts SDK.
 
 <Demo.Container name="Make a Payment" footerVariant="source" src="tempoxyz/accounts/tree/main/examples/basic">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.SendPayment stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <SendPayment stepNumber={3} last />
 </Demo.Container>
 
 ### Quick Prompt

src/pages/guide/_template.mdx

@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../components/guides/Demo.tsx'
-import * as Step from '../../components/guides/steps'
+import { AddFunds } from '../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../components/guides/steps/auth/Connect.tsx'
+import { CreateToken } from '../../components/guides/steps/issuance/CreateToken.tsx'
 
 # !Replace Me!
 
@@ -14,9 +16,9 @@ import * as Step from '../../components/guides/steps'
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum odio ante, sit amet tincidunt leo scelerisque vitae.
 
 <Demo.Container name="!Replace Me!" footerVariant="source" src="tempoxyz/examples/tree/main/examples/replace-me">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateToken stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateToken stepNumber={3} last />
 </Demo.Container>
 
 ## Steps

src/pages/guide/issuance/create-a-stablecoin.mdx

@@ -5,7 +5,9 @@ interactive: true
 
 import { Cards, Card } from 'vocs'
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateToken } from '../../../components/guides/steps/issuance/CreateToken.tsx'
 
 # Create a Stablecoin
 
@@ -18,9 +20,9 @@ and integration with Tempo's payment infrastructure.
 By the end of this guide, you will be able to create a stablecoin on Tempo.
 
 <Demo.Container name="Create a Stablecoin" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateToken stepNumber={3} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateToken stepNumber={3} last />
 </Demo.Container>
 
 ## Steps
@@ -44,7 +46,7 @@ as the [default fee token](/quickstart/integrate-tempo#default-fee-token), we wi
 Luckily, the built-in Tempo testnet faucet supports funding accounts with `AlphaUSD`.
 
 <Demo.Container name="Add Funds" footerVariant="balances" showBadge={false}>
-  <Step.AddFunds stepNumber={1} last />
+  <AddFunds stepNumber={1} last />
 </Demo.Container>
 
 :::code-group
@@ -95,8 +97,8 @@ Now that we have some funds to cover the transaction fee in our account, we can
 Let's create a new component and add some input fields for the **name** and **symbol** of our stablecoin, as shown in the demo.
 
 <Demo.Container name="Create Form">
-  <Step.AddFunds stepNumber={1} />
-  <Step.CreateToken stepNumber={2} last />
+  <AddFunds stepNumber={1} />
+  <CreateToken stepNumber={2} last />
 </Demo.Container>
 
 :::code-group
@@ -153,7 +155,7 @@ We **strongly** recommend that for stablecoins, the `currency` field be set to t
 :::
 
 <Demo.Container name="Create Form">
-  <Step.CreateToken stepNumber={1} last />
+  <CreateToken stepNumber={1} last />
 </Demo.Container>
 
 :::code-group

src/pages/guide/issuance/distribute-rewards.mdx

@@ -4,7 +4,14 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { ClaimReward } from '../../../components/guides/steps/rewards/ClaimReward.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
+import { OptInToRewards } from '../../../components/guides/steps/rewards/OptInToRewards.tsx'
+import { StartReward } from '../../../components/guides/steps/rewards/StartReward.tsx'
 import { Cards, Card } from 'vocs'
 
 # Distribute Rewards
@@ -18,14 +25,14 @@ Rewards can be distributed by anyone on any TIP-20 token, and claimed by any hol
 Try out the complete rewards flow: create a token, opt in to receive rewards on it, create a reward for yourself, and claim it.
 
 <Demo.Container name="Distribute Rewards" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.MintToken stepNumber={5} />
-  <Step.OptInToRewards stepNumber={6} />
-  <Step.StartReward stepNumber={7} />
-  <Step.ClaimReward stepNumber={8} flowDependencies={['rewardId']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <MintToken stepNumber={5} />
+  <OptInToRewards stepNumber={6} />
+  <StartReward stepNumber={7} />
+  <ClaimReward stepNumber={8} flowDependencies={['rewardId']} last />
 </Demo.Container>
 
 ## Steps

src/pages/guide/issuance/manage-stablecoin.mdx

@@ -4,7 +4,17 @@ interactive: true
 ---
 
 import * as Demo from '../../../components/guides/Demo.tsx'
-import * as Step from '../../../components/guides/steps'
+import { AddFunds } from '../../../components/guides/steps/payments/AddFunds.tsx'
+import { BurnTokenBlocked } from '../../../components/guides/steps/issuance/BurnTokenBlocked.tsx'
+import { Connect } from '../../../components/guides/steps/auth/Connect.tsx'
+import { CreateOrLoadToken } from '../../../components/guides/steps/issuance/CreateOrLoadToken.tsx'
+import { CreateTokenPolicy } from '../../../components/guides/steps/issuance/CreateTokenPolicy.tsx'
+import { GrantTokenRoles } from '../../../components/guides/steps/issuance/GrantTokenRoles.tsx'
+import { LinkTokenPolicy } from '../../../components/guides/steps/issuance/LinkTokenPolicy.tsx'
+import { MintToken } from '../../../components/guides/steps/issuance/MintToken.tsx'
+import { PauseUnpauseTransfers } from '../../../components/guides/steps/issuance/PauseUnpauseTransfers.tsx'
+import { RevokeTokenRoles } from '../../../components/guides/steps/issuance/RevokeTokenRoles.tsx'
+import { SetSupplyCap } from '../../../components/guides/steps/issuance/SetSupplyCap.tsx'
 import { Cards, Card } from 'vocs'
 
 # Manage Your Stablecoin
@@ -30,10 +40,10 @@ Once you've created your token, you can proceed to grant roles to specific addre
 Assign roles to specific addresses to delegate token management capabilities.
 
 <Demo.Container name="Grant Roles to an Address" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} last />
 </Demo.Container>
 
 :::code-group
@@ -170,11 +180,11 @@ export const config = createConfig({
 Revoke roles from addresses when you need to remove their permissions.
 
 <Demo.Container name="Revoke Issuer Role" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer']} />
-  <Step.RevokeTokenRoles stepNumber={5} roles={['issuer']} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer']} />
+  <RevokeTokenRoles stepNumber={5} roles={['issuer']} last />
 </Demo.Container>
 
 :::code-group
@@ -285,10 +295,10 @@ export const config = createConfig({
 Limit the maximum total supply of your token. Setting supply caps requires the **`DEFAULT_ADMIN_ROLE`**. The new cap cannot be less than the current total supply.
 
 <Demo.Container name="Set Supply Cap" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.SetSupplyCap stepNumber={4} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <SetSupplyCap stepNumber={4} last />
 </Demo.Container>
 
 :::code-group
@@ -358,11 +368,11 @@ Transfer policies can be:
 Learn more about configuring transfer policies in the [TIP-403 specification](/protocol/tip403/spec).
 
 <Demo.Container name="Create and Link Transfer Policy" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.CreateTokenPolicy stepNumber={4} />
-  <Step.LinkTokenPolicy stepNumber={5} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <CreateTokenPolicy stepNumber={4} />
+  <LinkTokenPolicy stepNumber={5} last />
 </Demo.Container>
 
 :::code-group
@@ -457,11 +467,11 @@ export const config = createConfig({
 Temporarily halt all token transfers during emergency situations or maintenance windows. Pausing transfers requires the **`PAUSE_ROLE`**. Unpausing transfers requires the **`UNPAUSE_ROLE`**.
 
 <Demo.Container name="Pause and Unpause Your Token" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['pause', 'unpause']} />
-  <Step.PauseUnpauseTransfers stepNumber={5} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['pause', 'unpause']} />
+  <PauseUnpauseTransfers stepNumber={5} last />
 </Demo.Container>
 
 :::code-group
@@ -535,14 +545,14 @@ export const config = createConfig({
 The Burn Blocked role allows your team to burn tokens from blocked or frozen addresses. This is useful for regulatory compliance when you need to remove tokens from addresses that violate terms of service or legal requirements.
 
 <Demo.Container name="Create and Link Transfer Policy" footerVariant="source" src="tempoxyz/examples/tree/main/examples/issuance">
-  <Step.Connect stepNumber={1} />
-  <Step.AddFunds stepNumber={2} />
-  <Step.CreateOrLoadToken stepNumber={3} />
-  <Step.GrantTokenRoles stepNumber={4} roles={['issuer', 'burnBlocked']} />
-  <Step.MintToken stepNumber={5} recipient={Demo.FAKE_RECIPIENT} />
-  <Step.CreateTokenPolicy stepNumber={6} flowDependencies={['transferId']} />
-  <Step.LinkTokenPolicy stepNumber={7} />
-  <Step.BurnTokenBlocked stepNumber={8} last />
+  <Connect stepNumber={1} />
+  <AddFunds stepNumber={2} />
+  <CreateOrLoadToken stepNumber={3} />
+  <GrantTokenRoles stepNumber={4} roles={['issuer', 'burnBlocked']} />
+  <MintToken stepNumber={5} recipient={Demo.FAKE_RECIPIENT} />
+  <CreateTokenPolicy stepNumber={6} flowDependencies={['transferId']} />
+  <LinkTokenPolicy stepNumber={7} />
+  <BurnTokenBlocked stepNumber={8} last />
 </Demo.Container>
 
 :::code-group