Initial Storybook Docs (#73)

ChainSafe · Dec 14, 2024 · 877c770 · 877c770
1 parent 98a6f4c
commit 877c770
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 1 deletion.
diff --git a/packages/circle-demo-webapp/.storybook/main.ts b/packages/circle-demo-webapp/.storybook/main.ts
@@ -11,7 +11,7 @@ function getAbsolutePath(value: string) {
 }
 
 const config: StorybookConfig = {
-  stories: ['../app/**/*.stories.@(ts|tsx)'],
+  stories: ['../app/**/*.mdx', '../app/**/*.stories.@(ts|tsx)'],
   addons: [getAbsolutePath('@storybook/addon-essentials')],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

diff --git a/packages/circle-demo-webapp/app/GettingStarted.mdx b/packages/circle-demo-webapp/app/GettingStarted.mdx
@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Getting Started" />
+
+Reusable UI components for working with
+[Circle Web3 Services](https://developers.circle.com/w3s/circle-programmable-wallets-an-overview).
diff --git a/packages/circle-demo-webapp/app/components/ChainLabel/ChainLabel.tsx b/packages/circle-demo-webapp/app/components/ChainLabel/ChainLabel.tsx
@@ -2,6 +2,7 @@ import { NetworkIcon } from '@web3icons/react';
 import { BLOCKCHAIN } from 'web3-circle-sdk';
 
 export interface ChainSelectProps {
+  /** The blockchain network */
   blockchain: BLOCKCHAIN;
 }
 
@@ -39,6 +40,7 @@ const BLOCKCHAIN_LABELS = {
   [BLOCKCHAIN.SOL]: 'Solana Mainnet',
 };
 
+/** A label with an icon and text to identify a blockchain network */
 export function ChainLabel({ blockchain }: ChainSelectProps) {
   return (
     <p className="text-sm text-gray-500 flex items-center space-x-2">

diff --git a/packages/circle-demo-webapp/app/components/ChainSelect/ChainSelect.tsx b/packages/circle-demo-webapp/app/components/ChainSelect/ChainSelect.tsx
@@ -26,6 +26,7 @@ const BLOCKCHAIN_LABELS: Record<string, string> = {
 
 export type ChainSelectProps = Omit<SelectProps, 'children'>;
 
+/** A dropdown select menu to choose a blockchain network */
 export function ChainSelect({ ...props }: ChainSelectProps) {
   return (
     <Select {...props}>

diff --git a/packages/circle-demo-webapp/app/components/TransactionDetails/TransactionDetails.tsx b/packages/circle-demo-webapp/app/components/TransactionDetails/TransactionDetails.tsx
@@ -5,9 +5,11 @@ import { Badge } from '~/components/ui/badge';
 import { formatDate, shortenAddress, shortenHash } from '~/lib/format';
 
 export interface TransactionDetailsProps {
+  /** The on-chain transaction */
   transaction: Transaction;
 }
 
+/** The details of an on-chain transaction */
 export function TransactionDetails({ transaction }: TransactionDetailsProps) {
   console.log(transaction);
 

diff --git a/packages/circle-demo-webapp/app/components/WalletBalance/WalletBalance.tsx b/packages/circle-demo-webapp/app/components/WalletBalance/WalletBalance.tsx
@@ -2,9 +2,11 @@ import { TokenIcon } from '@web3icons/react';
 import type { WalletTokenBalance } from 'web3-circle-sdk';
 
 export interface WalletBalanceProps {
+  /** The balance details */
   balance: WalletTokenBalance;
 }
 
+/** A token balance for an on-chain account */
 export function WalletBalance({ balance }: WalletBalanceProps) {
   return (
     <div className="flex items-center space-x-4">

diff --git a/packages/circle-demo-webapp/app/components/WalletDetails/WalletDetails.tsx b/packages/circle-demo-webapp/app/components/WalletDetails/WalletDetails.tsx
@@ -6,10 +6,13 @@ import { ChainLabel } from '~/components/ChainLabel';
 import { shortenAddress } from '~/lib/format';
 
 export interface WalletDetailsProps {
+  /** The wallet associated with the on-chain account */
   wallet: Wallet;
+  /** Child components to associate with the wallet */
   children?: React.ReactNode;
 }
 
+/** The details of an on-chain account */
 export function WalletDetails({ wallet, children }: WalletDetailsProps) {
   const shortAddress = useMemo(() => shortenAddress(wallet.address), [wallet]);
   const walletImage = useMemo(() => makeBlockie(wallet.address), [wallet]);

diff --git a/packages/circle-demo-webapp/app/components/WalletReceive/WalletReceive.tsx b/packages/circle-demo-webapp/app/components/WalletReceive/WalletReceive.tsx
@@ -6,9 +6,14 @@ import { ChainLabel } from '~/components/ChainLabel';
 import { Button } from '~/components/ui/button';
 
 export interface WalletReceiveProps {
+  /** The wallet */
   wallet: Wallet;
 }
 
+/**
+ * Helpers for obtaining a wallet's on-chain address:
+ * a QR code that encodes the address and elements for viewing the address and copying it to the clipboard
+ */
 export function WalletReceive({ wallet }: WalletReceiveProps) {
   const [copied, setCopied] = useState(false);
 

diff --git a/packages/circle-demo-webapp/app/components/WalletSetDetails/WalletSetDetails.tsx b/packages/circle-demo-webapp/app/components/WalletSetDetails/WalletSetDetails.tsx
@@ -3,10 +3,13 @@ import { WalletSet } from 'web3-circle-sdk';
 import { formatDate } from '~/lib/format';
 
 export interface WalletSetDetailsProps {
+  /** The wallet set */
   walletSet: WalletSet;
+  /** Child components to associate with the wallet set */
   children?: React.ReactNode;
 }
 
+/** The details of a wallet set */
 export function WalletSetDetails({ walletSet, children }: WalletSetDetailsProps) {
   return (
     <div className="flex items-center space-x-4">