Add support to Storybook for VA Mobile components #1499
Conversation
jamigibbs
added
the
ignore-for-release
| }); | ||
|
|
||
| export const Button = ({ text, onPress, color, textColor }: ButtonProps) => ( | ||
| <View style={styles.buttonContainer}> |
There was a problem hiding this comment.
This is just a simple react-native button to demonstrate that it renders in Storybook. We can remove this file after the discovery work is complete.
| @@ -0,0 +1,96 @@ | |||
| import { StorybookConfig } from "@storybook/react-webpack5"; | |||
There was a problem hiding this comment.
I updated this file (essentially the Storybook webpack build) to .ts so that we could use this StorybookConfig type which has helped to ferret out a few incorrect settings.
| (Story) => ( | ||
| <View | ||
| style={{ | ||
| flex: 1, |
There was a problem hiding this comment.
This Storybook file was moved from va-mobile-library repo so it's a 1:1 of that file except that we are importing the button from the NPM package.
| import './style.scss'; | ||
| import '@department-of-veterans-affairs/formation/dist/formation'; | ||
| // import '@department-of-veterans-affairs/formation/dist/formation'; |
There was a problem hiding this comment.
The mobile components aren't like web components with a shadow dom so we will have to deal with how global styles may bleed into elements.
For example, when these Formation imports are active, the border disappears from the secondary mobile components.
jamigibbs
changed the title
Chromatic
https://3716-mobile-storybook--65a6e2ed2314f7b8f98609d8.chromatic.com
Description
Complete discovery document here: https://vfs.atlassian.net/wiki/spaces/DST/pages/3872882700/Discovery+Integrating+mobile+components+into+VADS+Storybook
related department-of-veterans-affairs/vets-design-system-documentation#3716
QA Checklist
Screenshots
Acceptance criteria
Definition of done