Re-implements documentation

- Adds upgraded Storybook and some initial ported documentation

Makefile

@@ -11,9 +11,9 @@ test-types: $(pkg)
 	@npx dtslint types --expectOnly
 
 docs: $(pkg)
-	@npx start-storybook -p 6006 -c docs/.storybook/
+	@npx storybook dev -p 6006 -c docs/.storybook/
 docs-build: $(pkg)
-	@npx build-storybook -c docs/.storybook/ -o build/docs
+	@npx storybook build -c docs/.storybook/ -o build/docs
 docs-publish-remote:
 	@curl \
 		--header "Authorization: token $(GITHUB_TOKEN)" \
@@ -33,5 +33,8 @@ endif
 
 clean:
 	@rm -rf build lib-dist node_modules
+	@rm README.md
 
-.PHONY: clean publish test test-ci test-debug docs docs-build docs-deploy test-types test-ci test-cov-ci
+.PHONY: test test-debug test-watch test-types
+.PHONY: docs docs-build docs-publish-remote
+.PHONY: publish clean

docs/.storybook/main.js

@@ -0,0 +1,21 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  core: {
+    disableTelemetry: true
+  }
+};
+
+export default config;

docs/.storybook/preview-head.html

@@ -0,0 +1,11 @@
+<script src="https://js.recurly.com/v4/recurly.js"></script>
+<link rel="stylesheet" href="https://js.recurly.com/v4/recurly.css">
+<style>
+  .recurly-element {
+    height: 2.5em;
+  }
+
+  .sbdocs-title, .sbdocs-h1 {
+    font-weight: 700 !important;
+  }
+</style>

docs/.storybook/preview.js

@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: {
+      argTypesRegex: '^on[A-Z].*'
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+};
+
+export default preview;

docs/0-introduction/getting-started.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/blocks';
+import Readme from '../../README.mdx';
+
+<Meta title="Introduction/Getting Started" parameters={{ sortOrder: 0 }} />
+
+<Readme />

docs/0-introduction/interactive-demo.mdx

@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction/Interactive Demo" parameters={{ sortOrder: 1 }} />
+
+<iframe
+  src="https://codesandbox.io/embed/github/recurly/react-recurly/tree/main/demo?autoresize=1&fontsize=12&hidenavigation=1&theme=light"
+  style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: '0', overflow: 'hidden' }}
+  title="@recurly/react-recurly-demo"
+  allow="payment;"
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+></iframe>
+
+<div style={{ postion: 'absolute', width: '100%', height: '100%', textAlign: 'center' }}>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" height="75px" width="75px" style={{ margin: '48% auto' }}>
+    <circle cx="50%" cy="50%" r="24" strokeWidth="9" stroke="#5191b7" strokeDasharray="37.69911184307752 37.69911184307752" fill="none" strokeLinecap="round" transform="rotate(131.575 50 50)">
+      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1.1904761904761905s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
+    </circle>
+  </svg>
+</div>

docs/components/CardElement.stories.jsx

@@ -0,0 +1,16 @@
+import { CardElement } from '../../lib';
+
+export default {
+  component: CardElement,
+  tags: ['autodocs']
+};
+
+export const Primary = {
+  // render: () => <CardElement />,
+  args: {
+    // publicKey: 'MY_PUBLIC_KEY'
+  },
+  parameters: {
+    componentSubtitle: 'Accept all card parameters in one place'
+  }
+};

docs/components/Elements.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/blocks';
+import { Elements, CardElement } from '../../lib';
+
+<Meta title="Components/Elements" />
+
+# Elements
+
+`import { Elements } from '@recurly/react-recurly';`
+
+This component groups `*Element` components together. When generating tokens, it is used to determine which values will be tokenized. This should wrap your checkout form.
+
+The functionality of `<Elements />` is largely behind the scenes. It takes one `onSubmit` prop, and is used solely to designate which `*Element` components belong together in your component heirarchy.
+
+```js
+import {
+  RecurlyProvider,
+  Elements
+} from '@recurly/react-recurly';
+
+() => {
+  return (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
+      <Elements>
+        {/* Any *Element component from react-recurly */}
+      </Elements>
+    </RecurlyProvider>
+  );
+};
+```

docs/components/RecurlyProvider.mdx

@@ -0,0 +1,27 @@
+import { Meta, Controls } from '@storybook/blocks';
+import RecurlyProvider from './RecurlyProvider.stories';
+
+<Meta of={RecurlyProvider} />
+
+# RecurlyProvider
+
+`import { RecurlyProvider } from '@recurly/react-recurly';`
+
+This component accepts your `publicKey` and other configuration options for Recurly.js as props. It is responsible for creating a `recurly` instance on which we will generate tokens. This should wrap any other `react-recurly` component you will use.
+
+```js
+import { RecurlyProvider } from '@recurly/react-recurly';
+
+() => {
+  return (
+    <RecurlyProvider publicKey="MY_PUBLIC_KEY">
+      {/* Any other react-recurly component */}
+    </RecurlyProvider>
+  );
+};
+```
+**Note:** Replace `MY_PUBLIC_KEY` with yours, found [here][app-api-access].
+
+<Controls />
+
+[app-api-access]: https://app.recurly.com/go/developer/api_access

docs/components/RecurlyProvider.stories.jsx

@@ -0,0 +1,18 @@
+import { RecurlyProvider } from '../../lib';
+
+export default {
+  component: RecurlyProvider,
+  includeStories: ['Primary']
+};
+
+export const Empty = null;
+
+export const Primary = {
+  render: () => <RecurlyProvider />,
+  // args: {
+  //   publicKey: 'MY_PUBLIC_KEY'
+  // },
+  parameters: {
+    componentSubtitle: 'Top-level component'
+  }
+};