From 9e22acf974ad9968d3fce1775beea4f40123d331 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:23:00 -0700 Subject: [PATCH 1/6] docs: Link to Storybook in README --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index afc4e9c47..47f6c70bc 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,14 @@ Seam React component library. ## Description -Zero-backend beautiful drop-in pre-built components with everything you need to get started with Seam. +Zero-backend beautiful drop-in pre-built components +with everything you need to get started with [Seam]. + +Play with them in the [Storybook]! + +[Storybook]: https://seam-react.vercel.app/ + +[Seam]: https://www.seam.co/ ## Installation From de6519a312929a19f7b0ff4fbb39f610c1c66c82 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:23:11 -0700 Subject: [PATCH 2/6] docs: Add example code to README --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 47f6c70bc..693140305 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,31 @@ $ npm install @seamapi/react [npm]: https://www.npmjs.com/ +## Usage + +1. Obtain a publishable key from the [Seam Console]. +2. Wrap your app with the `SeamProvider`. +3. Drop in Seam components. + +```ts +import { SeamProvider, DeviceManager } from '@seamapi/react' + +export const App = () => { + return ( + +
+

My App

+ +
+ + ) +} +``` + +> Check out the [full example app](./examples/basic)! + +[Seam Console]: https://console.seam.co/ + ## Development and Testing ### Quickstart From cb3f73f7bb29981f757ab40fc2643d7401bac618 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:23:22 -0700 Subject: [PATCH 3/6] Wrap entire example app in SeamProvider --- examples/basic/src/App.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/basic/src/App.tsx b/examples/basic/src/App.tsx index c757c9290..a43d885c9 100644 --- a/examples/basic/src/App.tsx +++ b/examples/basic/src/App.tsx @@ -4,11 +4,11 @@ import { DeviceManager, SeamProvider } from 'index.js' export const App = (): ReactElement => { return ( -
-

Seam Components

- + +
+

Seam Components

- -
+
+ ) } From b36c659decd142283d8cfa5d222576439ba23d80 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:34:18 -0700 Subject: [PATCH 4/6] docs: Update development section in README --- README.md | 50 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 693140305..1716ea565 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ $ git clone https://github.com/seamapi/react.git $ cd react $ nvm install $ npm install -$ npm run test:watch +$ npm start ``` Primary development tasks are defined under `scripts` in `package.json` @@ -85,6 +85,9 @@ $ git clone git@github.com:seamapi/react.git ### Requirements You will need [Node.js] with [npm] and a [Node.js debugging] client. +Alternately, develop in the cloud with [Codespaces]. + +[codespaces]: https://github.com/features/codespaces Be sure that all commands run under the correct Node version, e.g., if using [nvm], install the correct version with @@ -110,6 +113,51 @@ $ npm install [npm]: https://www.npmjs.com/ [nvm]: https://github.com/creationix/nvm +### Storybook + +Develop components with [Storybook]. + +Run Storybook in development mode with + +``` +$ npm start +``` + +The Storybook is deployed in docs mode. +Develop the Storybook in docs mode with + +``` +$ npm run docs:start +``` + +[Storybook]: https://storybook.js.org/ + +### Previews + +Every pull request deploys the Storybook with the examples +in a [Vercel Preview Deployment] +where you may [comment directly on the preview][Vercel Comments]. + +[Vercel Preview Deployment]: https://vercel.com/docs/concepts/deployments/preview-deployments +[Vercel Comments]: https://vercel.com/docs/concepts/deployments/comments + +### Tests + +Write tests with [Jest]. + +[Jest]: https://jestjs.io/ + +### Examples + +Find fully working examples apps under `examples/`. +Each example app is built and deployed along with the Storybook documentation. + +Run and develop an example with, e.g., + +``` +$ npm run example:basic +``` + ### Publishing #### Automatic From 39f4f33ec457858a3f0d7576917d73dd6f2928bd Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:37:53 -0700 Subject: [PATCH 5/6] Note Storybook is live --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1716ea565..791de7a27 100644 --- a/README.md +++ b/README.md @@ -10,11 +10,10 @@ Seam React component library. Zero-backend beautiful drop-in pre-built components with everything you need to get started with [Seam]. -Play with them in the [Storybook]! - -[Storybook]: https://seam-react.vercel.app/ +Play with them live in the [Storybook]! [Seam]: https://www.seam.co/ +[Storybook]: https://seam-react.vercel.app/ ## Installation From f89562d8d224f19e8408c608de4ba613b422b028 Mon Sep 17 00:00:00 2001 From: Evan Sosenko Date: Wed, 19 Apr 2023 23:38:03 -0700 Subject: [PATCH 6/6] Move example link up --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 791de7a27..51f3818c4 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,8 @@ $ npm install @seamapi/react ## Usage +> Check out the [full example app](./examples/basic)! + 1. Obtain a publishable key from the [Seam Console]. 2. Wrap your app with the `SeamProvider`. 3. Drop in Seam components. @@ -46,8 +48,6 @@ export const App = () => { } ``` -> Check out the [full example app](./examples/basic)! - [Seam Console]: https://console.seam.co/ ## Development and Testing