Finalizes docs conversion

- All docs ported to Storybook 7 and React 18

docs/.storybook/preview.js

@@ -1,6 +1,26 @@
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Introduction',
+          'Components',
+          [
+            'RecurlyProvider',
+            'Elements',
+            'Card Element',
+            'Individual Card Elements',
+            '*'
+          ],
+          'Hooks',
+          [
+            'useRecurly',
+            '*'
+          ]
+        ],
+      },
+    },
     actions: {
       argTypesRegex: '^on[A-Z].*'
     },

docs/1-components/CardElement.stories.jsx

@@ -1,16 +1,83 @@
-import { CardElement } from '../../lib';
+import { stylePropFor } from '../shared/controls';
+import { displayIcon, inputType } from '../shared/args';
+import { withElements } from '../shared/decorators';
+import {
+  RecurlyProvider,
+  Elements,
+  CardElement
+} from '../../lib';
 
 export default {
   component: CardElement,
-  tags: ['autodocs']
+  title: 'Components/Card Element',
+  argTypes: { displayIcon, inputType },
+  tags: ['autodocs'],
+  decorators: [withElements],
+  parameters: {
+    componentSubtitle: 'Accept all card parameters in one place',
+    docs: {
+      description: {
+        component: `
+  A [Card Element](https://developers.recurly.com/reference/recurly-js/#the-card-element)
+  component which wraps its Recurly.js analogue, passing configuration props to the underlying
+  Recurly.js CardElement and allowing event binding using props.
+
+  Your users will enter their card information (number, expiry, and cvv) here.
+`
+      }
+    }
+  }
 };
 
-export const Primary = {
-  // render: () => <CardElement />,
+export const Default = {
   args: {
-    // publicKey: 'MY_PUBLIC_KEY'
+    style: stylePropFor(CardElement)
+  }
+};
+
+export const DropdownExpiry = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `inputType="select"` to render a `<select>` in place of default expiry text input.'
+      }
+    }
   },
+  args: {
+    inputType: 'select'
+  }
+};
+
+export const Localized = {
   parameters: {
-    componentSubtitle: 'Accept all card parameters in one place'
+    docs: {
+      description: {
+        story: 'Set `placeholder.content` to localize the `CardElement`.'
+      }
+    }
+  },
+  args: {
+    style: {
+      placeholder: {
+        content: {
+          number: 'Numéro de Carte',
+          expiry: 'MM / AA',
+          cvv: 'CVC'
+        }
+      }
+    }
+  }
+};
+
+export const WithoutCardIcon = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `displayIcon={false}` to disable the card brand icon.'
+      }
+    }
+  },
+  args: {
+    displayIcon: false
   }
 };

docs/1-components/Elements.mdx

@@ -1,10 +1,10 @@
-import { Meta, Controls } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Controls } from '@storybook/blocks';
 import * as ElementsStories from './Elements.stories';
-import { Elements, CardElement } from '../../lib';
+import { Elements } from '../../lib';
 
 <Meta of={ElementsStories} />
-
-# Elements
+<Title />
+<Subtitle />
 
 `import { Elements } from '@recurly/react-recurly';`
 

docs/1-components/Elements.stories.jsx

@@ -1,14 +1,17 @@
 import { RecurlyProvider, Elements } from '../../lib';
 
 export default {
-  component: Elements
-};
-
-export const Primary = {
-  render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY">
-    <Elements />
-  </RecurlyProvider>,
+  component: Elements,
+  title: 'Components/Elements',
   parameters: {
     componentSubtitle: 'Top-level component'
   }
 };
+
+export const Default = {
+  render: () => (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
+      <Elements />
+    </RecurlyProvider>
+  )
+};

docs/1-components/RecurlyProvider.mdx

@@ -1,9 +1,9 @@
-import { Meta, Controls } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Controls } from '@storybook/blocks';
 import * as RecurlyProviderStories from './RecurlyProvider.stories';
 
 <Meta of={RecurlyProviderStories} />
-
-# RecurlyProvider
+<Title />
+<Subtitle />
 
 `import { RecurlyProvider } from '@recurly/react-recurly';`
 

docs/1-components/RecurlyProvider.stories.jsx

@@ -1,12 +1,13 @@
 import { RecurlyProvider } from '../../lib';
 
 export default {
-  component: RecurlyProvider
-};
-
-export const Primary = {
-  render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY" />,
+  component: RecurlyProvider,
+  title: 'Components/RecurlyProvider',
   parameters: {
     componentSubtitle: 'Top-level component'
   }
 };
+
+export const Default = {
+  render: () => <RecurlyProvider publicKey="MY_PUBLIC_KEY" />
+};

docs/1-components/RiskDataCollector.mdx

@@ -0,0 +1,35 @@
+import { Title, Subtitle, Controls } from '@storybook/addon-docs/blocks';
+import { RiskDataCollectorStories } from './RiskDataCollector.stories';
+
+<Meta of={RiskDataCollectorStories} />
+<Title />
+<Subtitle />
+
+`import { RiskDataCollector } from '@recurly/react-recurly';`
+
+This component adds data collection elements to your checkout which are applied to any tokens generated within the bounds of its nearest ascendant parent `HTMLFormElement`.
+
+This component is compatible with [Recurly Fraud Management][doc-recurly-fraud-management] and [Kount][doc-kount].
+
+```js
+import { RiskDataCollector } from '@recurly/react-recurly';
+
+() => {
+  const handleError = (error) => {
+    // error.code
+    // error.message
+  };
+
+  return (
+    <RiskDataCollector
+      strategy="kount"
+      onError={handleError}
+    />
+  );
+};
+```
+
+<Controls />
+
+[doc-recurly-fraud-management]: https://docs.recurly.com/docs/fraud-management
+[doc-kount]: https://docs.recurly.com/docs/kount

docs/1-components/RiskDataCollector.stories.jsx

@@ -0,0 +1,15 @@
+import { RiskDataCollector } from '../../lib';
+
+export default {
+  component: RiskDataCollector,
+  title: 'Components/RiskDataCollector',
+  parameters: {
+    componentSubtitle: 'Fraud protection for your checkout'
+  }
+};
+
+export const Default = {
+  args: {
+    strategy: 'kount'
+  }
+};

docs/1-components/ThreeDSecureAction.mdx

@@ -0,0 +1,38 @@
+import { Story, Subtitle, Controls } from '@storybook/addon-docs/blocks';
+import { ThreeDSecureActionStories } from './ThreeDSecureAction.stories';
+
+<Meta of={ThreeDSecureActionStories} />
+<Title />
+<Subtitle />
+
+`import { ThreeDSecureAction } from '@recurly/react-recurly';`
+
+This component renders a 3-D Secure authentication flow. If you receive a `three_d_secure_action_token_id` from the [Recurly API][recurly-api], use it with this component to process the authentication and receive a result token.
+
+[More about Strong Customer Authentication][doc-sca]
+
+[Recurly 3-D Secure integration documentation][doc-3ds-integration]
+
+```js
+import { ThreeDSecureAction } from '@recurly/react-recurly';
+
+() => {
+  const handleToken = (token) => {
+    // token.type => 'three_d_secure_action_result'
+    // token.id
+  };
+
+  return (
+    <ThreeDSecureAction
+      actionTokenId="MY_ACTION_TOKEN_ID"
+      onToken={handleToken}
+    />
+  );
+};
+```
+
+<Controls />
+
+[recurly-api]: https://developers.recurly.com/api/
+[doc-sca]: https://docs.recurly.com/docs/revised-payment-services-directive-psd2
+[doc-3ds-integration]: https://dev.recurly.com/page/recurly-3d-secure-2-integration-guide

docs/1-components/ThreeDSecureAction.stories.jsx

@@ -0,0 +1,15 @@
+import { ThreeDSecureAction } from '../../lib';
+
+export default {
+  component: ThreeDSecureAction,
+  title: 'Components/ThreeDSecureAction',
+  parameters: {
+    componentSubtitle: 'Display a 3-D Secure authentication flow'
+  }
+};
+
+export const Default = {
+  args: {
+    actionTokenId: 'MY_ACTION_TOKEN_ID'
+  }
+};

docs/1-components/individual/CardCvvElement.stories.js

@@ -0,0 +1,42 @@
+import { withElements } from '../../shared/decorators';
+import { stylePropFor } from '../../shared/controls';
+import { CardCvvElement } from '../../../lib';
+
+export default {
+  component: CardCvvElement,
+  title: 'Components/Individual Card Elements/CardCvvElement',
+  tags: ['autodocs'],
+  decorators: [withElements],
+  parameters: {
+    componentSubtitle: 'Display a Card Verification Value (CVV) input'
+  }
+};
+
+export const Default = {
+  args: {
+    style: stylePropFor(CardCvvElement)
+  }
+};
+
+export const Placeholder = {
+  args: {
+    placeholder: {
+      content: 'CVV'
+    }
+  }
+};
+
+export const Localized = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `placeholder.content` to localize the `CardCvvElement`.'
+      }
+    }
+  },
+  args: {
+    placeholder: {
+      content: 'CVC'
+    }
+  }
+};

docs/1-components/individual/CardMonthElement.stories.js

@@ -0,0 +1,60 @@
+import { withElements } from '../../shared/decorators';
+import { stylePropFor } from '../../shared/controls';
+import { inputType } from '../../shared/args';
+import { CardMonthElement } from '../../../lib';
+
+export default {
+  component: CardMonthElement,
+  title: 'Components/Individual Card Elements/CardMonthElement',
+  tags: ['autodocs'],
+  argTypes: { inputType },
+  decorators: [withElements],
+  parameters: {
+    componentSubtitle: 'Display a card expiration month input'
+  }
+};
+
+export const Default = {
+  args: {
+    style: stylePropFor(CardMonthElement)
+  }
+};
+
+export const Dropdown = () => {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `inputType="select"` or `inputType="mobileSelect"` to display use a `<select>` dropdown.'
+      }
+    }
+  }
+  args: {
+    inputType: 'select'
+  }
+};
+export const Placeholder = {
+  args: {
+    style: {
+      placeholder: {
+        content: 'MM'
+      }
+    }
+  }
+};
+
+export const Localized = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Set `placeholder.content` to localize the `CardMonthElement`.'
+      }
+    }
+  },
+  args: {
+    style: {
+      placeholder: {
+        content: 'Mo'
+      }
+    }
+  }
+};