Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(ui-react-native): Add storybook #2464

Merged

Conversation

ioanabrooks
Copy link
Contributor

@ioanabrooks ioanabrooks commented Aug 12, 2022

Description of changes

Add Storybook support to RN example app for rapid prototyping. This change adds Storybook server as an optional way to run Storybook for the added benefit of being able to control multiple simulators/emulators with one click.

Issue #, if available

n/A

Description of how you validated changes

Tested in ios simulator and android emulator.

With Storybook server:

yarn run react-native-example storybook
yarn run react-native-example dev

Kapture 2022-08-12 at 13 55 05

Without storybook server:

Navigator tab Preview tab
Simulator Screen Shot - iPhone 13 - 2022-08-15 at 13 47 39 Simulator Screen Shot - iPhone 13 - 2022-08-15 at 13 47 48

Checklist

  • PR description included
  • yarn test passes
  • Tests are updated
  • No side effects or sideEffects field updated
  • Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

@ioanabrooks ioanabrooks requested a review from a team as a code owner August 12, 2022 21:37
@changeset-bot
Copy link

changeset-bot bot commented Aug 12, 2022

⚠️ No Changeset found

Latest commit: 3847965

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@ioanabrooks ioanabrooks added the run-tests Adding this label will trigger tests to run label Aug 12, 2022
@github-actions github-actions bot removed the run-tests Adding this label will trigger tests to run label Aug 12, 2022
@ioanabrooks ioanabrooks added the run-tests Adding this label will trigger tests to run label Aug 15, 2022
@github-actions github-actions bot removed the run-tests Adding this label will trigger tests to run label Aug 15, 2022
Copy link
Member

@calebpollman calebpollman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great start! Left a blocking comment on the ui-react-native exports and some general feedback/questions/nits

examples/react-native/storybook/stories/Button.stories.tsx Outdated Show resolved Hide resolved
examples/react-native/storybook/stories/Button.stories.tsx Outdated Show resolved Hide resolved
packages/react-native/src/index.ts Outdated Show resolved Hide resolved
examples/react-native/README.md Outdated Show resolved Hide resolved
examples/react-native/README.md Show resolved Hide resolved
examples/react-native/README.md Outdated Show resolved Hide resolved
@ioanabrooks ioanabrooks added the run-tests Adding this label will trigger tests to run label Aug 15, 2022
@github-actions github-actions bot removed the run-tests Adding this label will trigger tests to run label Aug 15, 2022
@ioanabrooks ioanabrooks added the run-tests Adding this label will trigger tests to run label Aug 16, 2022
@github-actions github-actions bot removed the run-tests Adding this label will trigger tests to run label Aug 16, 2022
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 16:31 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 16:31 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 16:31 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 16:31 Inactive
@@ -4,12 +4,12 @@ This directory contains example apps for each framework we support.

## Examples Development

1. Create or Update an example at [`examples/{next,vue,angular}/...`](examples)
1. Create or Update an example at [`examples/{next,react-native,vue,angular}/...`](examples)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

examples/react-native/README.md Outdated Show resolved Hide resolved

For your `aws-exports.js`, you can [reference an existing or create a new environment](../environments/README.md).

1. Run your example at monorep root: `yarn {react,vue,angular}-example dev`
1. Run your example at monorep root: `yarn {react,react-native,vue,angular}-example dev`
1. Visit your example (e.g. <http://localhost:3000/ui/components/authenticator/sign-up-with-username>)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wonder if we should update this line as well since it is specific to browser frameworks

examples/react-native/README.md Outdated Show resolved Hide resolved
examples/react-native/index.js Outdated Show resolved Hide resolved
ioanabrooks and others added 2 commits August 16, 2022 13:08
Co-authored-by: Caleb Pollman <cpollman@amazon.com>
Co-authored-by: Caleb Pollman <cpollman@amazon.com>
Co-authored-by: Caleb Pollman <cpollman@amazon.com>
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 20:32 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 20:32 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 20:32 Inactive
@ioanabrooks ioanabrooks temporarily deployed to ci August 16, 2022 20:32 Inactive
Copy link
Member

@calebpollman calebpollman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚢

@ioanabrooks ioanabrooks merged commit f62081f into in-app-messaging/main Aug 16, 2022
@ioanabrooks ioanabrooks deleted the in-app-messaging/add-storybook-example-app branch August 16, 2022 21:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants