diff --git a/.eslintignore b/.eslintignore index 8a2b2137a8..e8f63e7a0a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -17,8 +17,7 @@ built-storybooks .eslintrc.js !.jest.config.js !.storybook +!.rnstorybook examples/expo-example/metro.config.js storybook.requires.js -jest.config.js -app/react-native/scripts/mocks -addons/ondevice-knobs \ No newline at end of file +jest.config.js \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index b610270dda..9c69c252c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,6 +1,9 @@ module.exports = { root: true, extends: '@react-native', + parserOptions: { + requireConfigFile: false, + }, rules: { 'react-native/no-inline-styles': 'off', 'react/react-in-jsx-scope': 'off', diff --git a/MIGRATION.md b/MIGRATION.md index 440b5c691a..49d1e76172 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@ # Migration - [Migration](#migration) + - [From version 8.6.x to 9.x.x](#from-version-86x-to-9xx) - [From version 7.6.x to 8.3.x](#from-version-76x-to-83x) - [Dependencies](#dependencies) - [Regenerate your requires file](#regenerate-your-requires-file) @@ -39,6 +40,14 @@ - [Test ids for tabs](#test-ids-for-tabs) - [The server](#the-server) +## From version 8.6.x to 9.x.x + +Update storybook dependencies to 9.x + +Rename .storybook to .rnstorybook + +install the 'storybook' package if not already installed + ## From version 7.6.x to 8.3.x In this version of storybook we've reworked the UI using some community react native packages. We've also overhauled the theme to match the web version. @@ -65,11 +74,12 @@ For example you may end up with something like this Add the new required dependencies to your project. -Expo: +Expo: ```sh npx expo install react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet react-native-svg ``` + RN Cli: ```sh diff --git a/examples/expo-example/.maestro/baseline/ActionExample-Actions---Another-Action.png b/examples/expo-example/.maestro/baseline/ActionExample-Actions---Another-Action.png new file mode 100644 index 0000000000..4066061ce2 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ActionExample-Actions---Another-Action.png differ diff --git a/examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png b/examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png new file mode 100644 index 0000000000..4066061ce2 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ActionExample-Actions---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png b/examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png new file mode 100644 index 0000000000..7ba3318f3f Binary files /dev/null and b/examples/expo-example/.maestro/baseline/BackgroundExample-BackgroundCsf---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png new file mode 100644 index 0000000000..3d4248bb6b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Array---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png new file mode 100644 index 0000000000..9f5390a008 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png b/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png new file mode 100644 index 0000000000..68bb774f90 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Boolean---On.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png b/examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png new file mode 100644 index 0000000000..c0449b6fe7 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Color---Color-Example.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png b/examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png new file mode 100644 index 0000000000..d9e7b442dc Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-ControlExample---Example.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png new file mode 100644 index 0000000000..24508eb8fa Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Date---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png new file mode 100644 index 0000000000..857b3faa0a Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Number---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png b/examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png new file mode 100644 index 0000000000..ab1510eb68 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Number---Range.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Object---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Object---Basic.png new file mode 100644 index 0000000000..28aa1f5eb8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Object---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Radio---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Radio---Basic.png new file mode 100644 index 0000000000..164eeebda3 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Radio---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Reproductions-SelectWithNumber---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Reproductions-SelectWithNumber---Basic.png new file mode 100644 index 0000000000..b958b47e6f Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Reproductions-SelectWithNumber---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Select---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Select---Basic.png new file mode 100644 index 0000000000..162134b52b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Select---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Labels.png b/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Labels.png new file mode 100644 index 0000000000..286bb7fa2a Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Labels.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Mapping.png b/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Mapping.png new file mode 100644 index 0000000000..ff168c1885 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Select---With-Mapping.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-Text---Basic.png b/examples/expo-example/.maestro/baseline/ControlExamples-Text---Basic.png new file mode 100644 index 0000000000..11dd3bced9 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-Text---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Defined.png b/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Defined.png new file mode 100644 index 0000000000..363350e0c8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Defined.png differ diff --git a/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Undefined.png b/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Undefined.png new file mode 100644 index 0000000000..f27a8d16d0 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/ControlExamples-WebCompatibility---Undefined.png differ diff --git a/examples/expo-example/.maestro/baseline/DeepControls---Basic.png b/examples/expo-example/.maestro/baseline/DeepControls---Basic.png new file mode 100644 index 0000000000..0ba364895e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/DeepControls---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/InputExample-TextInput---Basic.png b/examples/expo-example/.maestro/baseline/InputExample-TextInput---Basic.png new file mode 100644 index 0000000000..0a8b7f6e30 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/InputExample-TextInput---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/InteractionExample---Scrolling.png b/examples/expo-example/.maestro/baseline/InteractionExample---Scrolling.png new file mode 100644 index 0000000000..0f953b09d4 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/InteractionExample---Scrolling.png differ diff --git a/examples/expo-example/.maestro/baseline/InteractionExample---Static.png b/examples/expo-example/.maestro/baseline/InteractionExample---Static.png new file mode 100644 index 0000000000..0fce3ee6a8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/InteractionExample---Static.png differ diff --git a/examples/expo-example/.maestro/baseline/InteractionExample---Touchable.png b/examples/expo-example/.maestro/baseline/InteractionExample---Touchable.png new file mode 100644 index 0000000000..aca40bcc35 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/InteractionExample---Touchable.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-First.png b/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-First.png new file mode 100644 index 0000000000..b57c98369e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-First.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-Second.png b/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-Second.png new file mode 100644 index 0000000000..b074a5ce2e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-ChatMessage---Message-Second.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-One.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-One.png new file mode 100644 index 0000000000..b57c98369e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-One.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-Two.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-Two.png new file mode 100644 index 0000000000..b074a5ce2e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-Reactions---Message-Two.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---First.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---First.png new file mode 100644 index 0000000000..dc9cd76b5d Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---First.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---Second-Story.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---Second-Story.png new file mode 100644 index 0000000000..d80126a37f Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble---Second-Story.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png new file mode 100644 index 0000000000..dc9cd76b5d Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png new file mode 100644 index 0000000000..d80126a37f Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story.png differ diff --git a/examples/expo-example/.maestro/baseline/NestingExample-MessageInput---Basic.png b/examples/expo-example/.maestro/baseline/NestingExample-MessageInput---Basic.png new file mode 100644 index 0000000000..b57c98369e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NestingExample-MessageInput---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/NotesExample---Notes-Example.png b/examples/expo-example/.maestro/baseline/NotesExample---Notes-Example.png new file mode 100644 index 0000000000..cec63250bd Binary files /dev/null and b/examples/expo-example/.maestro/baseline/NotesExample---Notes-Example.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---Basic.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---Basic.png new file mode 100644 index 0000000000..2ef8718320 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---List-Basic.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---List-Basic.png new file mode 100644 index 0000000000..ff5c2a3c1e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaInside---List-Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---Basic.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---Basic.png new file mode 100644 index 0000000000..29b0f2d6c1 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---List-Basic.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---List-Basic.png new file mode 100644 index 0000000000..4fbcd6c61e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-SafeAreaOutside---List-Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---No-Safe-Area.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---No-Safe-Area.png new file mode 100644 index 0000000000..13b9bfabfc Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---No-Safe-Area.png differ diff --git a/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---Safe-Area.png b/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---Safe-Area.png new file mode 100644 index 0000000000..13b9bfabfc Binary files /dev/null and b/examples/expo-example/.maestro/baseline/SafeAreaExample-UsableArea---Safe-Area.png differ diff --git a/examples/expo-example/.maestro/baseline/TestCase---Basic.png b/examples/expo-example/.maestro/baseline/TestCase---Basic.png new file mode 100644 index 0000000000..60d0af617d Binary files /dev/null and b/examples/expo-example/.maestro/baseline/TestCase---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/TestCase2---Basic.png b/examples/expo-example/.maestro/baseline/TestCase2---Basic.png new file mode 100644 index 0000000000..a869f5057e Binary files /dev/null and b/examples/expo-example/.maestro/baseline/TestCase2---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Active.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Active.png new file mode 100644 index 0000000000..baa0c23c7c Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Active.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Animated.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Animated.png new file mode 100644 index 0000000000..33be9ab11b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Animated.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Base.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Base.png new file mode 100644 index 0000000000..5611459d00 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Base.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Disabled.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Disabled.png new file mode 100644 index 0000000000..d27e79f0f8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Disabled.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Icon-Only.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Icon-Only.png new file mode 100644 index 0000000000..041b191ded Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Icon-Only.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Sizes.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Sizes.png new file mode 100644 index 0000000000..057e312d64 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Sizes.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Variants.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Variants.png new file mode 100644 index 0000000000..dff6965cb3 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---Variants.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---With-Icon.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---With-Icon.png new file mode 100644 index 0000000000..7ff70bf78c Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Button---With-Icon.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-SearchResults---Default.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-SearchResults---Default.png new file mode 100644 index 0000000000..9635bdf352 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-SearchResults---Default.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Explorer---Simple.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Explorer---Simple.png new file mode 100644 index 0000000000..60c00b9f39 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Explorer---Simple.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Bottom.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Bottom.png new file mode 100644 index 0000000000..7cb3c82222 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Bottom.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Empty.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Empty.png new file mode 100644 index 0000000000..5ea56a6148 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Empty.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Index-Error.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Index-Error.png new file mode 100644 index 0000000000..5ea56a6148 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Index-Error.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png new file mode 100644 index 0000000000..5ea56a6148 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png new file mode 100644 index 0000000000..977a14ea24 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading.png new file mode 100644 index 0000000000..5ea56a6148 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Loading.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Scrolled.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Scrolled.png new file mode 100644 index 0000000000..2058efff3b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Scrolled.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Searching.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Searching.png new file mode 100644 index 0000000000..7cb3c82222 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Searching.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Simple.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Simple.png new file mode 100644 index 0000000000..7cb3c82222 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Simple.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png new file mode 100644 index 0000000000..7cb3c82222 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png new file mode 100644 index 0000000000..7cb3c82222 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png new file mode 100644 index 0000000000..5ea56a6148 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Refs.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Refs.png new file mode 100644 index 0000000000..2df1cf5140 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Sidebar---With-Refs.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Dark.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Dark.png new file mode 100644 index 0000000000..17e8d8dad8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Dark.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Full.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Full.png new file mode 100644 index 0000000000..17e8d8dad8 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Full.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png new file mode 100644 index 0000000000..6a1341f04b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Single-Story-Components.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png new file mode 100644 index 0000000000..c463380275 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png new file mode 100644 index 0000000000..c7bd6c44f6 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable.png new file mode 100644 index 0000000000..71c5740c83 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Expandable.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Nested.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Nested.png new file mode 100644 index 0000000000..7c5bd6b825 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Nested.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png new file mode 100644 index 0000000000..66cc461edb Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection.png new file mode 100644 index 0000000000..e79f205cbd Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Selection.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Types.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Types.png new file mode 100644 index 0000000000..c118845d5a Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-Sidebar-TreeNode---Types.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Element-Logo.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Element-Logo.png new file mode 100644 index 0000000000..99f12f487f Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Element-Logo.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Logo.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Logo.png new file mode 100644 index 0000000000..f42413f391 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Logo.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Source-Logo.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Source-Logo.png new file mode 100644 index 0000000000..798102a62b Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Source-Logo.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Url-Logo.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Url-Logo.png new file mode 100644 index 0000000000..f42413f391 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Image-Url-Logo.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Title-Logo.png b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Title-Logo.png new file mode 100644 index 0000000000..d158596131 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-UI-StorybookLogo---Title-Logo.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Basic.png b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Basic.png new file mode 100644 index 0000000000..b085ca1b93 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Basic.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Addons-Example.png b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Addons-Example.png new file mode 100644 index 0000000000..b085ca1b93 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Addons-Example.png differ diff --git a/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Sidebar-Example.png b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Sidebar-Example.png new file mode 100644 index 0000000000..b085ca1b93 Binary files /dev/null and b/examples/expo-example/.maestro/baseline/react-native-ui-src-Layout---Overflow-Sidebar-Example.png differ diff --git a/examples/expo-example/.maestro/storybook-screenshots.yaml b/examples/expo-example/.maestro/storybook-screenshots.yaml index 32c2f09879..6416c5a020 100644 --- a/examples/expo-example/.maestro/storybook-screenshots.yaml +++ b/examples/expo-example/.maestro/storybook-screenshots.yaml @@ -4,144 +4,144 @@ name: Take screenshots of all Storybook stories - stopApp: host.exp.Exponent # Story 0 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=actionexample-actions--basic' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-controlexample--example' - waitForAnimationToEnd - assertVisible: - id: 'actionexample-actions--basic' -- takeScreenshot: '.maestro/screenshots/ActionExample-Actions---Basic' + id: 'controlexamples-controlexample--example' +- takeScreenshot: '.maestro/screenshots/ControlExamples-ControlExample---Example' # Story 1 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=actionexample-actions--another-action' -- waitForAnimationToEnd -- assertVisible: - id: 'actionexample-actions--another-action' -- takeScreenshot: '.maestro/screenshots/ActionExample-Actions---Another-Action' - -# Story 2 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=backgroundexample-backgroundcsf--basic' -- waitForAnimationToEnd -- assertVisible: - id: 'backgroundexample-backgroundcsf--basic' -- takeScreenshot: '.maestro/screenshots/BackgroundExample-BackgroundCsf---Basic' - -# Story 3 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-array--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-array--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Array---Basic' -# Story 4 +# Story 2 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-boolean--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-boolean--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Boolean---Basic' -# Story 5 +# Story 3 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-boolean--on' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-boolean--on' - takeScreenshot: '.maestro/screenshots/ControlExamples-Boolean---On' -# Story 6 +# Story 4 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-color--color-example' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-color--color-example' - takeScreenshot: '.maestro/screenshots/ControlExamples-Color---Color-Example' -# Story 7 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-controlexample--example' -- waitForAnimationToEnd -- assertVisible: - id: 'controlexamples-controlexample--example' -- takeScreenshot: '.maestro/screenshots/ControlExamples-ControlExample---Example' - -# Story 8 +# Story 5 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-date--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-date--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Date---Basic' -# Story 9 +# Story 6 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-number--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-number--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Number---Basic' -# Story 10 +# Story 7 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-number--range' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-number--range' - takeScreenshot: '.maestro/screenshots/ControlExamples-Number---Range' -# Story 11 +# Story 8 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-object--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-object--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Object---Basic' -# Story 12 +# Story 9 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-radio--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-radio--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Radio---Basic' -# Story 13 +# Story 10 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-reproductions-selectwithnumber--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-reproductions-selectwithnumber--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Reproductions-SelectWithNumber---Basic' -# Story 14 +# Story 11 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-select--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-select--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Select---Basic' -# Story 15 +# Story 12 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-select--with-labels' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-select--with-labels' - takeScreenshot: '.maestro/screenshots/ControlExamples-Select---With-Labels' -# Story 16 +# Story 13 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-select--with-mapping' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-select--with-mapping' - takeScreenshot: '.maestro/screenshots/ControlExamples-Select---With-Mapping' -# Story 17 +# Story 14 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-text--basic' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-text--basic' - takeScreenshot: '.maestro/screenshots/ControlExamples-Text---Basic' -# Story 18 +# Story 15 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-webcompatibility--defined' +- waitForAnimationToEnd +- assertVisible: + id: 'controlexamples-webcompatibility--defined' +- takeScreenshot: '.maestro/screenshots/ControlExamples-WebCompatibility---Defined' + +# Story 16 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-webcompatibility--undefined' - waitForAnimationToEnd - assertVisible: id: 'controlexamples-webcompatibility--undefined' - takeScreenshot: '.maestro/screenshots/ControlExamples-WebCompatibility---Undefined' +# Story 17 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--scrolling' +- waitForAnimationToEnd +- assertVisible: + id: 'interactionexample--scrolling' +- takeScreenshot: '.maestro/screenshots/InteractionExample---Scrolling' + +# Story 18 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--static' +- waitForAnimationToEnd +- assertVisible: + id: 'interactionexample--static' +- takeScreenshot: '.maestro/screenshots/InteractionExample---Static' + # Story 19 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=controlexamples-webcompatibility--defined' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--touchable' - waitForAnimationToEnd - assertVisible: - id: 'controlexamples-webcompatibility--defined' -- takeScreenshot: '.maestro/screenshots/ControlExamples-WebCompatibility---Defined' + id: 'interactionexample--touchable' +- takeScreenshot: '.maestro/screenshots/InteractionExample---Touchable' # Story 20 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=deepcontrols--basic' @@ -151,32 +151,32 @@ name: Take screenshots of all Storybook stories - takeScreenshot: '.maestro/screenshots/DeepControls---Basic' # Story 21 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=inputexample-textinput--basic' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=actionexample-actions--another-action' - waitForAnimationToEnd - assertVisible: - id: 'inputexample-textinput--basic' -- takeScreenshot: '.maestro/screenshots/InputExample-TextInput---Basic' + id: 'actionexample-actions--another-action' +- takeScreenshot: '.maestro/screenshots/ActionExample-Actions---Another-Action' # Story 22 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--static' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=actionexample-actions--basic' - waitForAnimationToEnd - assertVisible: - id: 'interactionexample--static' -- takeScreenshot: '.maestro/screenshots/InteractionExample---Static' + id: 'actionexample-actions--basic' +- takeScreenshot: '.maestro/screenshots/ActionExample-Actions---Basic' # Story 23 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--touchable' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=backgroundexample-backgroundcsf--basic' - waitForAnimationToEnd - assertVisible: - id: 'interactionexample--touchable' -- takeScreenshot: '.maestro/screenshots/InteractionExample---Touchable' + id: 'backgroundexample-backgroundcsf--basic' +- takeScreenshot: '.maestro/screenshots/BackgroundExample-BackgroundCsf---Basic' # Story 24 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=interactionexample--scrolling' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=inputexample-textinput--basic' - waitForAnimationToEnd - assertVisible: - id: 'interactionexample--scrolling' -- takeScreenshot: '.maestro/screenshots/InteractionExample---Scrolling' + id: 'inputexample-textinput--basic' +- takeScreenshot: '.maestro/screenshots/InputExample-TextInput---Basic' # Story 25 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-chatmessage--message-first' @@ -193,54 +193,54 @@ name: Take screenshots of all Storybook stories - takeScreenshot: '.maestro/screenshots/NestingExample-ChatMessage---Message-Second' # Story 27 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble--first' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--first' - waitForAnimationToEnd - assertVisible: - id: 'nestingexample-message-bubble--first' -- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble---First' + id: 'nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--first' +- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First' # Story 28 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble--second' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--second' - waitForAnimationToEnd - assertVisible: - id: 'nestingexample-message-bubble--second' -- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble---Second-Story' + id: 'nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--second' +- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story' # Story 29 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--first' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble--first' - waitForAnimationToEnd - assertVisible: - id: 'nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--first' -- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---First' + id: 'nestingexample-message-bubble--first' +- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble---First' # Story 30 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--second' +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-bubble--second' - waitForAnimationToEnd - assertVisible: - id: 'nestingexample-message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going--second' -- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble-a-very-long-name-for-a-title-that-just-keeps-going-and-going---Second-Story' + id: 'nestingexample-message-bubble--second' +- takeScreenshot: '.maestro/screenshots/NestingExample-Message-bubble---Second-Story' # Story 31 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-messageinput--basic' -- waitForAnimationToEnd -- assertVisible: - id: 'nestingexample-messageinput--basic' -- takeScreenshot: '.maestro/screenshots/NestingExample-MessageInput---Basic' - -# Story 32 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-reactions--message-one' - waitForAnimationToEnd - assertVisible: id: 'nestingexample-message-reactions--message-one' - takeScreenshot: '.maestro/screenshots/NestingExample-Message-Reactions---Message-One' -# Story 33 +# Story 32 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-message-reactions--message-two' - waitForAnimationToEnd - assertVisible: id: 'nestingexample-message-reactions--message-two' - takeScreenshot: '.maestro/screenshots/NestingExample-Message-Reactions---Message-Two' +# Story 33 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=nestingexample-messageinput--basic' +- waitForAnimationToEnd +- assertVisible: + id: 'nestingexample-messageinput--basic' +- takeScreenshot: '.maestro/screenshots/NestingExample-MessageInput---Basic' + # Story 34 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=notesexample--notes-example' - waitForAnimationToEnd @@ -249,43 +249,344 @@ name: Take screenshots of all Storybook stories - takeScreenshot: '.maestro/screenshots/NotesExample---Notes-Example' # Story 35 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-src-layout--basic' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-src-layout--basic' +- takeScreenshot: '.maestro/screenshots/react-native-ui-src-Layout---Basic' + +# Story 36 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-src-layout--overflow-addons-example' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-src-layout--overflow-addons-example' +- takeScreenshot: '.maestro/screenshots/react-native-ui-src-Layout---Overflow-Addons-Example' + +# Story 37 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-src-layout--overflow-sidebar-example' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-src-layout--overflow-sidebar-example' +- takeScreenshot: '.maestro/screenshots/react-native-ui-src-Layout---Overflow-Sidebar-Example' + +# Story 38 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--active' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--active' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Active' + +# Story 39 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--animated' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--animated' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Animated' + +# Story 40 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--base' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--base' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Base' + +# Story 41 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--disabled' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--disabled' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Disabled' + +# Story 42 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--icon-only' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--icon-only' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Icon-Only' + +# Story 43 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--sizes' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--sizes' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Sizes' + +# Story 44 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--variants' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--variants' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---Variants' + +# Story 45 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-button--with-icon' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-button--with-icon' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Button---With-Icon' + +# Story 46 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-searchresults--default' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-searchresults--default' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-SearchResults---Default' + +# Story 47 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-explorer--simple' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-explorer--simple' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Explorer---Simple' + +# Story 48 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--bottom' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--bottom' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Bottom' + +# Story 49 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--empty' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--empty' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Empty' + +# Story 50 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--index-error' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--index-error' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Index-Error' + +# Story 51 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--loading' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--loading' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Loading' + +# Story 52 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--loading-with-ref-error' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--loading-with-ref-error' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Ref-Error' + +# Story 53 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--loading-with-refs' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--loading-with-refs' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Loading-With-Refs' + +# Story 54 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--scrolled' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--scrolled' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Scrolled' + +# Story 55 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--searching' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--searching' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Searching' + +# Story 56 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--simple' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--simple' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Simple' + +# Story 57 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--statuses-collapsed' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--statuses-collapsed' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Statuses-Collapsed' + +# Story 58 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--statuses-open' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--statuses-open' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---Statuses-Open' + +# Story 59 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--with-ref-empty' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--with-ref-empty' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---With-Ref-Empty' + +# Story 60 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-sidebar--with-refs' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-sidebar--with-refs' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Sidebar---With-Refs' + +# Story 61 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-tree--dark' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-tree--dark' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Tree---Dark' + +# Story 62 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-tree--full' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-tree--full' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Tree---Full' + +# Story 63 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-tree--single-story-components' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-tree--single-story-components' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Tree---Single-Story-Components' + +# Story 64 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-tree--with-story-names' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-tree--with-story-names' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-Tree---Story-with-a-storyName' + +# Story 65 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--expandable' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--expandable' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Expandable' + +# Story 66 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--expandable-long-name' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--expandable-long-name' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Expandable-Long-Name' + +# Story 67 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--nested' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--nested' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Nested' + +# Story 68 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--selection' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--selection' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Selection' + +# Story 69 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--selection-with-long-name' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--selection-with-long-name' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Selection-With-Long-Name' + +# Story 70 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-sidebar-treenode--types' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-sidebar-treenode--types' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-Sidebar-TreeNode---Types' + +# Story 71 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-storybooklogo--image-element-logo' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-storybooklogo--image-element-logo' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-StorybookLogo---Image-Element-Logo' + +# Story 72 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-storybooklogo--image-logo' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-storybooklogo--image-logo' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-StorybookLogo---Image-Logo' + +# Story 73 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-storybooklogo--image-source-logo' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-storybooklogo--image-source-logo' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-StorybookLogo---Image-Source-Logo' + +# Story 74 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-storybooklogo--image-url-logo' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-storybooklogo--image-url-logo' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-StorybookLogo---Image-Url-Logo' + +# Story 75 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=react-native-ui-ui-storybooklogo--title-logo' +- waitForAnimationToEnd +- assertVisible: + id: 'react-native-ui-ui-storybooklogo--title-logo' +- takeScreenshot: '.maestro/screenshots/react-native-ui-UI-StorybookLogo---Title-Logo' + +# Story 76 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-safeareainside--basic' - waitForAnimationToEnd - assertVisible: id: 'safeareaexample-safeareainside--basic' - takeScreenshot: '.maestro/screenshots/SafeAreaExample-SafeAreaInside---Basic' -# Story 36 +# Story 77 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-safeareainside--list-basic' - waitForAnimationToEnd - assertVisible: id: 'safeareaexample-safeareainside--list-basic' - takeScreenshot: '.maestro/screenshots/SafeAreaExample-SafeAreaInside---List-Basic' -# Story 37 +# Story 78 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-safeareaoutside--basic' - waitForAnimationToEnd - assertVisible: id: 'safeareaexample-safeareaoutside--basic' - takeScreenshot: '.maestro/screenshots/SafeAreaExample-SafeAreaOutside---Basic' -# Story 38 +# Story 79 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-safeareaoutside--list-basic' - waitForAnimationToEnd - assertVisible: id: 'safeareaexample-safeareaoutside--list-basic' - takeScreenshot: '.maestro/screenshots/SafeAreaExample-SafeAreaOutside---List-Basic' -# Story 39 +# Story 80 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-usablearea--no-safe-area' +- waitForAnimationToEnd +- assertVisible: + id: 'safeareaexample-usablearea--no-safe-area' +- takeScreenshot: '.maestro/screenshots/SafeAreaExample-UsableArea---No-Safe-Area' + +# Story 81 - openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-usablearea--safe-area' - waitForAnimationToEnd - assertVisible: id: 'safeareaexample-usablearea--safe-area' - takeScreenshot: '.maestro/screenshots/SafeAreaExample-UsableArea---Safe-Area' -# Story 40 -- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=safeareaexample-usablearea--no-safe-area' +# Story 82 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=testcase--basic' - waitForAnimationToEnd - assertVisible: - id: 'safeareaexample-usablearea--no-safe-area' -- takeScreenshot: '.maestro/screenshots/SafeAreaExample-UsableArea---No-Safe-Area' + id: 'testcase--basic' +- takeScreenshot: '.maestro/screenshots/TestCase---Basic' + +# Story 83 +- openLink: 'exp://127.0.0.1:8081/--/?STORYBOOK_STORY_ID=testcase2--basic' +- waitForAnimationToEnd +- assertVisible: + id: 'testcase2--basic' +- takeScreenshot: '.maestro/screenshots/TestCase2---Basic' diff --git a/examples/expo-example/.rnstorybook/index.tsx b/examples/expo-example/.rnstorybook/index.tsx new file mode 100644 index 0000000000..80283816e9 --- /dev/null +++ b/examples/expo-example/.rnstorybook/index.tsx @@ -0,0 +1,50 @@ +import { SafeAreaView, StatusBar, Text } from 'react-native'; +import { view } from './storybook.requires'; +import AsyncStorage from '@react-native-async-storage/async-storage'; +import { theme, ThemeProvider } from '@storybook/react-native-theming'; +const isScreenshotTesting = process.env.EXPO_PUBLIC_SCREENSHOT_TESTING === 'true'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; + +const StorybookUIRoot = view.getStorybookUI({ + shouldPersistSelection: true, + storage: { + getItem: AsyncStorage.getItem, + setItem: AsyncStorage.setItem, + }, + enableWebsockets: false, + onDeviceUI: !isScreenshotTesting, + // host: '192.x.x.x', + // port: 7007, + + // initialSelection: { kind: 'TextInput', name: 'Basic' }, + // onDeviceUI: false, + // host: '192.168.1.69', + /* theme: { + brand: { + image: { + uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png', + width: 25, + height: 25, + } , + }, + }, */ +}); + +const StorybookUI = () => { + if (isScreenshotTesting) { + return ( + + + ); + } + + return ; +}; + +export default StorybookUI; diff --git a/examples/expo-example/.storybook/local-addon-example/preview.js b/examples/expo-example/.rnstorybook/local-addon-example/preview.js similarity index 100% rename from examples/expo-example/.storybook/local-addon-example/preview.js rename to examples/expo-example/.rnstorybook/local-addon-example/preview.js diff --git a/examples/expo-example/.storybook/local-addon-example/register.js b/examples/expo-example/.rnstorybook/local-addon-example/register.js similarity index 100% rename from examples/expo-example/.storybook/local-addon-example/register.js rename to examples/expo-example/.rnstorybook/local-addon-example/register.js diff --git a/examples/expo-example/.rnstorybook/main.ts b/examples/expo-example/.rnstorybook/main.ts new file mode 100644 index 0000000000..a0f13d9972 --- /dev/null +++ b/examples/expo-example/.rnstorybook/main.ts @@ -0,0 +1,28 @@ +import { StorybookConfig } from '@storybook/react-native'; + +const main: StorybookConfig = { + stories: [ + '../components/**/*.stories.?(ts|tsx|js|jsx)', + '../other_components/**/*.stories.?(ts|tsx|js|jsx)', + { + directory: '../../../packages/react-native-ui', + titlePrefix: 'react-native-ui', + files: '**/*.stories.?(ts|tsx|js|jsx)', + }, + ], + addons: [ + { name: '@storybook/addon-ondevice-controls' }, + '@storybook/addon-ondevice-backgrounds', + '@storybook/addon-ondevice-actions', + '@storybook/addon-ondevice-notes', + 'storybook-addon-deep-controls', + './local-addon-example', + ], + reactNative: { + playFn: false, + }, + + framework: '@storybook/react-native', +}; + +export default main; diff --git a/examples/expo-example/.rnstorybook/preview.tsx b/examples/expo-example/.rnstorybook/preview.tsx new file mode 100644 index 0000000000..501e55a0b6 --- /dev/null +++ b/examples/expo-example/.rnstorybook/preview.tsx @@ -0,0 +1,43 @@ +import { View, Appearance } from 'react-native'; +import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; +import type { Preview } from '@storybook/react'; + +const preview: Preview = { + decorators: [ + (Story) => ( + + + + ), + withBackgrounds, + ], + parameters: { + actions: { argTypesRegex: '^on[A-Z].*' }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + options: { + storySort: { + method: 'alphabetical', + includeNames: true, + order: ['ControlExamples', ['ControlExample'], 'InteractionExample', 'DeepControls'], + }, + }, + hideFullScreenButton: false, + noSafeArea: false, + my_param: 'anything', + backgrounds: { + default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain', + values: [ + { name: 'plain', value: 'white' }, + { name: 'dark', value: '#333' }, + { name: 'app', value: '#eeeeee' }, + ], + }, + }, +}; + +export default preview; diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.rnstorybook/storybook.requires.ts similarity index 100% rename from examples/expo-example/.storybook/storybook.requires.ts rename to examples/expo-example/.rnstorybook/storybook.requires.ts diff --git a/examples/expo-example/.storybook-web/main.ts b/examples/expo-example/.storybook-web/main.ts deleted file mode 100644 index 3ebea79f1a..0000000000 --- a/examples/expo-example/.storybook-web/main.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { StorybookConfig } from '@storybook/react-native-web-vite'; -import { join, dirname } from 'path'; - -type ServerStorybookConfig = StorybookConfig & { - reactNativeServerOptions: { host: string; port: number }; -}; - -const main: ServerStorybookConfig = { - stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'], - - addons: [ - '@storybook/addon-essentials', - '@storybook/addon-interactions', - // note why does this break with get absolute? - '@storybook/addon-react-native-server', - 'storybook-addon-deep-controls', - ], - - framework: { - name: '@storybook/react-native-web-vite', - options: {}, - }, - - // logLevel: 'debug', - - reactNativeServerOptions: { - host: 'localhost', - port: 7007, - }, -}; - -export default main; diff --git a/examples/expo-example/.storybook-web/preview.tsx b/examples/expo-example/.storybook-web/preview.tsx deleted file mode 100644 index 2eea01b86f..0000000000 --- a/examples/expo-example/.storybook-web/preview.tsx +++ /dev/null @@ -1,14 +0,0 @@ -/** @type { import('@storybook/react').Preview } */ -const preview = { - parameters: { - // actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, -}; - -export default preview; diff --git a/examples/expo-example/.storybook/index.tsx b/examples/expo-example/.storybook/index.tsx deleted file mode 100644 index 465d5dabc0..0000000000 --- a/examples/expo-example/.storybook/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Text } from 'react-native'; -import { view } from './storybook.requires'; -import AsyncStorage from '@react-native-async-storage/async-storage'; - -const StorybookUIRoot = view.getStorybookUI({ - shouldPersistSelection: true, - storage: { - getItem: AsyncStorage.getItem, - setItem: AsyncStorage.setItem, - }, - enableWebsockets: false, - // host: '192.x.x.x', - // port: 7007, - - // initialSelection: { kind: 'TextInput', name: 'Basic' }, - // onDeviceUI: false, - // host: '192.168.1.69', - /* theme: { - brand: { - image: { - uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png', - width: 25, - height: 25, - } , - }, - }, */ -}); - -export default StorybookUIRoot; diff --git a/examples/expo-example/.storybook/main.ts b/examples/expo-example/.storybook/main.ts index 857426d64b..3ebea79f1a 100644 --- a/examples/expo-example/.storybook/main.ts +++ b/examples/expo-example/.storybook/main.ts @@ -1,25 +1,31 @@ -import { StorybookConfig } from '@storybook/react-native'; +import type { StorybookConfig } from '@storybook/react-native-web-vite'; +import { join, dirname } from 'path'; + +type ServerStorybookConfig = StorybookConfig & { + reactNativeServerOptions: { host: string; port: number }; +}; + +const main: ServerStorybookConfig = { + stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'], -const main: StorybookConfig = { - stories: [ - '../components/**/*.stories.?(ts|tsx|js|jsx)', - '../other_components/**/*.stories.?(ts|tsx|js|jsx)', - { - directory: '../../../packages/react-native-ui', - titlePrefix: 'react-native-ui', - files: '**/*.stories.?(ts|tsx|js|jsx)', - }, - ], addons: [ - { name: '@storybook/addon-ondevice-controls' }, - '@storybook/addon-ondevice-backgrounds', - '@storybook/addon-ondevice-actions', - '@storybook/addon-ondevice-notes', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + // note why does this break with get absolute? + '@storybook/addon-react-native-server', 'storybook-addon-deep-controls', - './local-addon-example', ], - reactNative: { - playFn: false, + + framework: { + name: '@storybook/react-native-web-vite', + options: {}, + }, + + // logLevel: 'debug', + + reactNativeServerOptions: { + host: 'localhost', + port: 7007, }, }; diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx index 501e55a0b6..2eea01b86f 100644 --- a/examples/expo-example/.storybook/preview.tsx +++ b/examples/expo-example/.storybook/preview.tsx @@ -1,42 +1,13 @@ -import { View, Appearance } from 'react-native'; -import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; -import type { Preview } from '@storybook/react'; - -const preview: Preview = { - decorators: [ - (Story) => ( - - - - ), - withBackgrounds, - ], +/** @type { import('@storybook/react').Preview } */ +const preview = { parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, + // actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, - date: /Date$/, - }, - }, - options: { - storySort: { - method: 'alphabetical', - includeNames: true, - order: ['ControlExamples', ['ControlExample'], 'InteractionExample', 'DeepControls'], + date: /Date$/i, }, }, - hideFullScreenButton: false, - noSafeArea: false, - my_param: 'anything', - backgrounds: { - default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain', - values: [ - { name: 'plain', value: 'white' }, - { name: 'dark', value: '#333' }, - { name: 'app', value: '#eeeeee' }, - ], - }, }, }; diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx index 30b764db0e..fbaf73f3d3 100644 --- a/examples/expo-example/App.tsx +++ b/examples/expo-example/App.tsx @@ -20,7 +20,7 @@ function App() { let AppEntryPoint = App; if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') { - AppEntryPoint = require('./.storybook').default; + AppEntryPoint = require('./.rnstorybook').default; } export default AppEntryPoint; diff --git a/examples/expo-example/jest.config.js b/examples/expo-example/jest.config.js index fc28cbde1e..ddcb426d23 100644 --- a/examples/expo-example/jest.config.js +++ b/examples/expo-example/jest.config.js @@ -4,6 +4,9 @@ const config = { preset: 'jest-expo', setupFilesAfterEnv: ['/setup-jest.ts'], + transformIgnorePatterns: [ + 'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook/.*|@storybook/.*|uuid)', + ], }; module.exports = config; diff --git a/examples/expo-example/metro.config.js b/examples/expo-example/metro.config.js index 6e929b9698..f05ba5bfa3 100644 --- a/examples/expo-example/metro.config.js +++ b/examples/expo-example/metro.config.js @@ -26,7 +26,7 @@ module.exports = withStorybook(defaultConfig); /* , { enabled: process.env.STORYBOOK_ENABLED === 'true', - configPath: path.resolve(__dirname, './.storybook'), + configPath: path.resolve(__dirname, './.rnstorybook'), // websockets: { // port: 7007, // host: '192.x.x.x', diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json index eeba0ff0b4..63b06c916b 100644 --- a/examples/expo-example/package.json +++ b/examples/expo-example/package.json @@ -1,6 +1,6 @@ { "name": "expo-example", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "private": true, "main": "index.js", "scripts": { @@ -8,9 +8,10 @@ "ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios", "web": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web", "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c", - "storybook:web": "storybook dev -p 6006 -c ./.storybook-web", - "build-web-storybook": "storybook build -c ./.storybook-web", - "storybook-generate": "sb-rn-get-stories --config-path=./.storybook", + "storybook:test": "EXPO_PUBLIC_SCREENSHOT_TESTING=true EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c", + "storybook:web": "storybook dev -p 6006", + "build-web-storybook": "storybook build", + "storybook-generate": "sb-rn-get-stories --config-path=./.rnstorybook", "disabled-example": "expo start", "format": "prettier --write .", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", @@ -18,7 +19,8 @@ "test": "jest", "test:ci": "jest --runInBand", "generate-maestro-tests": "ts-node scripts/generate-maestro-tests.ts", - "test:maestro": "maestro run .maestro/storybook-screenshots.yaml" + "test:maestro": "maestro test .maestro/storybook-screenshots.yaml", + "test:compare": "node --no-warnings --experimental-strip-types scripts/compare-screenshots.ts " }, "dependencies": { "@babel/preset-env": "^7.25.4", @@ -27,21 +29,20 @@ "@react-native-async-storage/async-storage": "1.23.1", "@react-native-community/datetimepicker": "8.2.0", "@react-native-community/slider": "4.5.5", - "@storybook/addon-essentials": "^8.6.6", - "@storybook/addon-interactions": "^8.6.6", - "@storybook/addon-links": "^8.6.6", - "@storybook/addon-ondevice-actions": "^8.6.2", - "@storybook/addon-ondevice-backgrounds": "^8.6.2", - "@storybook/addon-ondevice-controls": "^8.6.2", - "@storybook/addon-ondevice-notes": "^8.6.2", + "@storybook/addon-essentials": "9.0.0-alpha.8", + "@storybook/addon-interactions": "9.0.0-alpha.8", + "@storybook/addon-links": "9.0.0-alpha.8", + "@storybook/addon-ondevice-actions": "^9.0.0-alpha.8", + "@storybook/addon-ondevice-backgrounds": "^9.0.0-alpha.8", + "@storybook/addon-ondevice-controls": "^9.0.0-alpha.8", + "@storybook/addon-ondevice-notes": "^9.0.0-alpha.8", "@storybook/addon-react-native-server": "0.0.6", - "@storybook/blocks": "^8.6.6", + "@storybook/blocks": "9.0.0-alpha.8", "@storybook/global": "^5.0.0", - "@storybook/react": "^8.6.6", - "@storybook/react-native": "^8.6.2", - "@storybook/react-native-theming": "^8.6.2", - "@storybook/react-native-web-vite": "^8.6.6", - "@storybook/test": "^8.6.6", + "@storybook/react": "9.0.0-alpha.8", + "@storybook/react-native": "^9.0.0-alpha.8", + "@storybook/react-native-theming": "^9.0.0-alpha.8", + "@storybook/react-native-web-vite": "9.0.0-alpha.8", "expo": "~52.0.39", "history": "^5.3.0", "querystring": "^0.2.1", @@ -54,7 +55,7 @@ "react-native-svg": "15.8.0", "react-native-web": "~0.19.13", "react-router": "^6.26.2", - "storybook": "^8.6.6", + "storybook": "9.0.0-alpha.8", "storybook-addon-deep-controls": "^0.9.2", "ws": "^8.18.0" }, @@ -63,6 +64,7 @@ "@babel/plugin-proposal-export-namespace-from": "^7.18.9", "@react-native/babel-preset": "^0.74.0", "@testing-library/react-native": "12.4.3", + "@types/looks-same": "^4.1.0", "@types/react": "~18.3.12", "@types/react-test-renderer": "^18.3.0", "@types/ws": "^8.5.10", @@ -70,6 +72,7 @@ "babel-plugin-react-docgen-typescript": "^1.5.1", "jest": "^29.7.0", "jest-expo": "~52.0.6", + "looks-same": "^9.0.1", "typescript": "^5.3.3", "vite": "^6.1.1" } diff --git a/examples/expo-example/scripts/compare-screenshots.ts b/examples/expo-example/scripts/compare-screenshots.ts new file mode 100644 index 0000000000..2e6bc018fe --- /dev/null +++ b/examples/expo-example/scripts/compare-screenshots.ts @@ -0,0 +1,52 @@ +import * as fs from 'fs'; +import * as path from 'path'; +import looksSame from 'looks-same'; +import { fileURLToPath } from 'url'; + +// @ts-ignore +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const screenshotsDir = path.resolve(__dirname, '..', '.maestro', 'screenshots'); +const baselineDir = path.resolve(__dirname, '..', '.maestro', 'baseline'); +const diffsDir = path.resolve(__dirname, '..', '.maestro', 'diffs'); + +// Add debug logging +console.log('Paths:', { + screenshotsDir, + baselineDir, + diffsDir, +}); + +async function compareScreenshots() { + const screenshots = fs.readdirSync(screenshotsDir); + console.log('screenshots', screenshots); + for (const screenshot of screenshots) { + const currentPath = path.join(screenshotsDir, screenshot); + const baselinePath = path.join(baselineDir, screenshot); + const diffPath = path.join(diffsDir, `diff_${screenshot}`); + + if (!fs.existsSync(baselinePath)) { + console.log(`Baseline not found for ${screenshot}`); + continue; + } + + try { + const result = await looksSame(baselinePath, currentPath, { + strict: false, + tolerance: 2.5, + createDiffImage: true, + }); + + if (!result.equal) { + await result.diffImage?.save(diffPath); + } + + console.log(`${screenshot}: ${result.equal ? 'Match' : 'Differs'}`); + } catch (error) { + console.error(`Error comparing ${screenshot}:`, error); + } + } +} + +compareScreenshots().catch(console.error); diff --git a/examples/expo-example/scripts/generate-maestro-tests.ts b/examples/expo-example/scripts/generate-maestro-tests.ts index 7390d6f82a..81f87e59cb 100644 --- a/examples/expo-example/scripts/generate-maestro-tests.ts +++ b/examples/expo-example/scripts/generate-maestro-tests.ts @@ -1,24 +1,25 @@ import { readFileSync, writeFileSync, mkdirSync } from 'fs'; import { join } from 'path'; -// Read the index.json file -const indexPath = join(__dirname, '../storybook-static/index.json'); -const indexContent = readFileSync(indexPath, 'utf-8'); -const index = JSON.parse(indexContent); - -// Ensure .maestro directory exists -const maestroDir = join(__dirname, '../.maestro'); -mkdirSync(maestroDir, { recursive: true }); - -// Generate Maestro test file content -const stories = Object.values(index.entries) - .filter((entry: any) => entry.type === 'story') - .map((story: any) => ({ - id: story.id, - name: story.title.replace(/\//g, '-') + ' - ' + story.name, - })); - -const maestroContent = `appId: host.exp.Exponent +const run = async () => { + const { buildIndex } = await import('storybook/internal/core-server'); + const index = await buildIndex({ + configDir: join(__dirname, '../.rnstorybook'), + }); + + // Ensure .maestro directory exists + const maestroDir = join(__dirname, '../.maestro'); + mkdirSync(maestroDir, { recursive: true }); + + // Generate Maestro test file content + const stories = Object.values(index.entries) + .filter((entry: any) => entry.type === 'story') + .map((story: any) => ({ + id: story.id, + name: story.title.replace(/\//g, '-') + ' - ' + story.name, + })); + + const maestroContent = `appId: host.exp.Exponent name: Take screenshots of all Storybook stories --- - stopApp: host.exp.Exponent @@ -35,8 +36,19 @@ ${stories ) .join('\n')}`; -// Write the Maestro test file -const maestroTestPath = join(maestroDir, 'storybook-screenshots.yaml'); -writeFileSync(maestroTestPath, maestroContent); + // Write the Maestro test file + const maestroTestPath = join(maestroDir, 'storybook-screenshots.yaml'); + writeFileSync(maestroTestPath, maestroContent); + + console.log('Generated Maestro test file at:', maestroTestPath); +}; -console.log('Generated Maestro test file at:', maestroTestPath); +run() + .then(() => { + console.log('Done'); + process.exit(0); + }) + .catch((err) => { + console.error(err); + process.exit(1); + }); diff --git a/examples/expo-example/setup-jest.ts b/examples/expo-example/setup-jest.ts index 8430893d7c..2379886ec5 100644 --- a/examples/expo-example/setup-jest.ts +++ b/examples/expo-example/setup-jest.ts @@ -1,2 +1,5 @@ import '@testing-library/react-native/extend-expect'; import 'react-native-gesture-handler/jestSetup'; + +// @ts-ignore +global.window.navigator = {}; diff --git a/examples/expo-example/tsconfig.json b/examples/expo-example/tsconfig.json index 5d350a2a14..972c92a581 100644 --- a/examples/expo-example/tsconfig.json +++ b/examples/expo-example/tsconfig.json @@ -3,8 +3,9 @@ "skipLibCheck": true, "lib": ["es6"], "baseUrl": "./", - "strict": true + "strict": true, + "esModuleInterop": true }, "extends": "expo/tsconfig.base", - "include": ["./.storybook/", "./.storybook-web/", "./*"] + "include": [".rnstorybook", ".storybook", "./*"] } diff --git a/lerna.json b/lerna.json index 9b180c201b..246061b6cf 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { "npmClient": "yarn", "registry": "https://registry.npmjs.org", - "version": "8.6.2" -} \ No newline at end of file + "version": "9.0.0-alpha.8" +} diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json index 80bd0e6c96..26dd561958 100644 --- a/packages/ondevice-actions/package.json +++ b/packages/ondevice-actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-actions", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "Action Logger addon for react-native storybook", "keywords": [ "storybook" @@ -27,8 +27,6 @@ "prepare": "tsc" }, "dependencies": { - "@storybook/addon-actions": "^8.6.6", - "@storybook/core": "^8.6.6", "@storybook/global": "^5.0.0", "fast-deep-equal": "^2.0.1" }, @@ -37,7 +35,8 @@ }, "peerDependencies": { "react": "*", - "react-native": "*" + "react-native": "*", + "storybook": "9.0.0-alpha.8" }, "publishConfig": { "access": "public" diff --git a/packages/ondevice-actions/preview.js b/packages/ondevice-actions/preview.js index 0d7d5c6c33..c8df5376f0 100644 --- a/packages/ondevice-actions/preview.js +++ b/packages/ondevice-actions/preview.js @@ -1 +1 @@ -export * from '@storybook/addon-actions/preview'; +export * from 'storybook/actions/preview'; diff --git a/packages/ondevice-actions/src/components/ActionLogger/index.tsx b/packages/ondevice-actions/src/components/ActionLogger/index.tsx index 7be193fe36..41890370fd 100644 --- a/packages/ondevice-actions/src/components/ActionLogger/index.tsx +++ b/packages/ondevice-actions/src/components/ActionLogger/index.tsx @@ -1,5 +1,4 @@ -import { ActionDisplay } from '@storybook/addon-actions'; -import React from 'react'; +import { ActionDisplay } from 'storybook/actions'; import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'; import Inspect from './Inspect'; diff --git a/packages/ondevice-actions/src/containers/ActionLogger/index.tsx b/packages/ondevice-actions/src/containers/ActionLogger/index.tsx index 13b9f748fe..e1f08d534a 100644 --- a/packages/ondevice-actions/src/containers/ActionLogger/index.tsx +++ b/packages/ondevice-actions/src/containers/ActionLogger/index.tsx @@ -1,8 +1,8 @@ import React, { useState, useEffect } from 'react'; import deepEqual from 'fast-deep-equal'; -import { addons } from '@storybook/core/manager-api'; -import { SET_CURRENT_STORY } from '@storybook/core/core-events'; -import { ActionDisplay, EVENT_ID } from '@storybook/addon-actions'; +import { addons } from 'storybook/internal/manager-api'; +import { SET_CURRENT_STORY } from 'storybook/internal/core-events'; +import { ActionDisplay, EVENT_ID } from 'storybook/actions'; import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger'; interface ActionLoggerProps { diff --git a/packages/ondevice-actions/src/index.tsx b/packages/ondevice-actions/src/index.tsx index 8eec2f7090..10aba38ec5 100644 --- a/packages/ondevice-actions/src/index.tsx +++ b/packages/ondevice-actions/src/index.tsx @@ -1,5 +1,5 @@ -import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions'; -import { addons, types } from '@storybook/core/manager-api'; +import { ADDON_ID, PANEL_ID, PARAM_KEY } from 'storybook/actions'; +import { addons, types } from 'storybook/internal/manager-api'; import ActionLogger from './containers/ActionLogger'; export function register() { diff --git a/packages/ondevice-actions/src/preview.ts b/packages/ondevice-actions/src/preview.ts index 0d7d5c6c33..c8df5376f0 100644 --- a/packages/ondevice-actions/src/preview.ts +++ b/packages/ondevice-actions/src/preview.ts @@ -1 +1 @@ -export * from '@storybook/addon-actions/preview'; +export * from 'storybook/actions/preview'; diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json index 09a779b3df..1806565f14 100644 --- a/packages/ondevice-backgrounds/package.json +++ b/packages/ondevice-backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-backgrounds", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "A react-native storybook addon to show different backgrounds for your preview", "keywords": [ "addon", @@ -32,15 +32,15 @@ "dev": "tsc --watch" }, "dependencies": { - "@storybook/core": "^8.6.6", - "@storybook/react-native-theming": "^8.6.2" + "@storybook/react-native-theming": "^9.0.0-alpha.8" }, "devDependencies": { "typescript": "^5.3.3" }, "peerDependencies": { "react": "*", - "react-native": "*" + "react-native": "*", + "storybook": "9.0.0-alpha.8" }, "publishConfig": { "access": "public" diff --git a/packages/ondevice-backgrounds/src/BackgroundPanel.tsx b/packages/ondevice-backgrounds/src/BackgroundPanel.tsx index 42cfa0ead9..34fd3c4ea9 100644 --- a/packages/ondevice-backgrounds/src/BackgroundPanel.tsx +++ b/packages/ondevice-backgrounds/src/BackgroundPanel.tsx @@ -1,4 +1,4 @@ -import { AddonStore, type API } from '@storybook/core/manager-api'; +import { AddonStore, type API } from 'storybook/internal/manager-api'; import { StyleSheet, Text, View } from 'react-native'; import Swatch from './Swatch'; diff --git a/packages/ondevice-backgrounds/src/index.tsx b/packages/ondevice-backgrounds/src/index.tsx index 66128615ab..28c97e1643 100644 --- a/packages/ondevice-backgrounds/src/index.tsx +++ b/packages/ondevice-backgrounds/src/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { makeDecorator } from '@storybook/core/preview-api'; -import { addons } from '@storybook/core/manager-api'; +import { makeDecorator } from 'storybook/internal/preview-api'; +import { addons } from 'storybook/internal/manager-api'; import Events from './constants'; import Container from './container'; diff --git a/packages/ondevice-backgrounds/src/register.tsx b/packages/ondevice-backgrounds/src/register.tsx index 1f937bc12f..58919323db 100644 --- a/packages/ondevice-backgrounds/src/register.tsx +++ b/packages/ondevice-backgrounds/src/register.tsx @@ -1,4 +1,4 @@ -import { addons, types } from '@storybook/core/manager-api'; +import { addons, types } from 'storybook/internal/manager-api'; import BackgroundPanel from './BackgroundPanel'; import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants'; diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json index a5392d5b7c..3717215edd 100644 --- a/packages/ondevice-controls/package.json +++ b/packages/ondevice-controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-controls", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "Display storybook controls on your device.", "keywords": [ "addon", @@ -30,10 +30,9 @@ "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources" }, "dependencies": { - "@storybook/addon-controls": "^8.6.6", - "@storybook/core": "^8.6.6", - "@storybook/react-native-theming": "^8.6.2", - "@storybook/react-native-ui": "^8.6.2", + "@storybook/addon-controls": "9.0.0-alpha.8", + "@storybook/react-native-theming": "^9.0.0-alpha.8", + "@storybook/react-native-ui": "^9.0.0-alpha.8", "deep-equal": "^1.0.1", "prop-types": "^15.7.2", "react-native-modal-datetime-picker": "^18.0.0", @@ -48,7 +47,8 @@ "@react-native-community/datetimepicker": "*", "@react-native-community/slider": "*", "react": "*", - "react-native": "*" + "react-native": "*", + "storybook": "9.0.0-alpha.8" }, "publishConfig": { "access": "public" diff --git a/packages/ondevice-controls/src/ControlsPanel.tsx b/packages/ondevice-controls/src/ControlsPanel.tsx index 47eea19131..73efa66121 100644 --- a/packages/ondevice-controls/src/ControlsPanel.tsx +++ b/packages/ondevice-controls/src/ControlsPanel.tsx @@ -1,7 +1,7 @@ -import type { API } from '@storybook/core/manager-api'; -import { Channel } from '@storybook/core/channels'; -import type { Args, StoryContextForLoaders } from '@storybook/csf'; -import type { Renderer } from '@storybook/core/types'; +import type { API } from 'storybook/internal/manager-api'; +import { Channel } from 'storybook/internal/channels'; +import type { Args, StoryContextForLoaders } from 'storybook/internal/csf'; +import type { Renderer } from 'storybook/internal/types'; import React, { ComponentType, ReactElement, useCallback, useState } from 'react'; import NoControlsWarning from './NoControlsWarning'; import PropForm from './PropForm'; diff --git a/packages/ondevice-controls/src/hooks.ts b/packages/ondevice-controls/src/hooks.ts index d0393144c0..00e7f83c89 100644 --- a/packages/ondevice-controls/src/hooks.ts +++ b/packages/ondevice-controls/src/hooks.ts @@ -1,6 +1,6 @@ -import { Args, StoryContext } from '@storybook/core/types'; +import { Args, StoryContext } from 'storybook/internal/types'; import { useState, useEffect, useCallback } from 'react'; -import Events from '@storybook/core/core-events'; +import Events from 'storybook/internal/core-events'; export const useArgs = ( storyId: string, diff --git a/packages/ondevice-controls/src/index.tsx b/packages/ondevice-controls/src/index.tsx index 72704afa0f..afd03be9fe 100644 --- a/packages/ondevice-controls/src/index.tsx +++ b/packages/ondevice-controls/src/index.tsx @@ -1,4 +1,4 @@ -import { addons, types } from '@storybook/core/manager-api'; +import { addons, types } from 'storybook/internal/manager-api'; import ControlsPanel from './ControlsPanel'; import { AddonPanel } from './Panel'; diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json index 9cdc55950a..cc0311dc91 100644 --- a/packages/ondevice-notes/package.json +++ b/packages/ondevice-notes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-ondevice-notes", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "Write notes for your react-native Storybook stories.", "keywords": [ "addon", @@ -29,8 +29,7 @@ "dev": "tsc --watch" }, "dependencies": { - "@storybook/core": "^8.6.6", - "@storybook/react-native-theming": "^8.6.2", + "@storybook/react-native-theming": "^9.0.0-alpha.8", "react-native-markdown-display": "^7.0.2" }, "devDependencies": { @@ -38,7 +37,8 @@ }, "peerDependencies": { "react": "*", - "react-native": "*" + "react-native": "*", + "storybook": "9.0.0-alpha.8" }, "publishConfig": { "access": "public" diff --git a/packages/ondevice-notes/src/components/Notes.tsx b/packages/ondevice-notes/src/components/Notes.tsx index 23cb399a52..01ed376585 100644 --- a/packages/ondevice-notes/src/components/Notes.tsx +++ b/packages/ondevice-notes/src/components/Notes.tsx @@ -1,11 +1,11 @@ -import { SET_CURRENT_STORY } from '@storybook/core/core-events'; +import { SET_CURRENT_STORY } from 'storybook/internal/core-events'; import { useEffect, useMemo, useState } from 'react'; import { StyleSheet, View } from 'react-native'; import Markdown from 'react-native-markdown-display'; import { RNAddonApi, StoryFromId } from '../register'; import { ErrorBoundary } from '../ErrorBoundary'; -import { addons } from '@storybook/core/manager-api'; +import { addons } from 'storybook/internal/manager-api'; import { useTheme } from '@storybook/react-native-theming'; export const PARAM_KEY = 'notes'; diff --git a/packages/ondevice-notes/src/index.ts b/packages/ondevice-notes/src/index.ts index 49e128e51f..92870775e1 100644 --- a/packages/ondevice-notes/src/index.ts +++ b/packages/ondevice-notes/src/index.ts @@ -1,4 +1,4 @@ -import { logger } from '@storybook/core/client-logger'; +import { logger } from 'storybook/internal/client-logger'; if (__DEV__) { logger.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon"); diff --git a/packages/ondevice-notes/src/register.tsx b/packages/ondevice-notes/src/register.tsx index f16dfd2fe0..bf518c0fe9 100644 --- a/packages/ondevice-notes/src/register.tsx +++ b/packages/ondevice-notes/src/register.tsx @@ -1,10 +1,10 @@ -import { API, addons, types } from '@storybook/core/manager-api'; +import { API, addons, types } from 'storybook/internal/manager-api'; import { Notes } from './components/Notes'; import { ComponentType, ReactElement } from 'react'; -import type { Args, StoryContextForLoaders } from '@storybook/csf'; -import type { Renderer } from '@storybook/core/types'; +import type { Args, StoryContextForLoaders } from 'storybook/internal/csf'; +import type { Renderer } from 'storybook/internal/types'; export const PARAM_KEY = 'notes'; -import type { Channel } from '@storybook/core/channels'; +import type { Channel } from 'storybook/internal/channels'; export interface Selection { storyId: string; diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json index f68f66c608..692f6044d1 100644 --- a/packages/react-native-theming/package.json +++ b/packages/react-native-theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-theming", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook", "keywords": [ "react", diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json index aeaaa329ab..89799e17a7 100644 --- a/packages/react-native-ui/package.json +++ b/packages/react-native-ui/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-ui", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "ui components for react native storybook", "keywords": [ "react", @@ -58,9 +58,8 @@ "typescript": "^5.3.3" }, "dependencies": { - "@storybook/core": "^8.6.6", - "@storybook/react": "^8.6.6", - "@storybook/react-native-theming": "^8.6.2", + "@storybook/react": "9.0.0-alpha.8", + "@storybook/react-native-theming": "^9.0.0-alpha.8", "fuse.js": "^7.0.0", "memoizerific": "^1.11.3", "polished": "^4.3.1", @@ -73,7 +72,8 @@ "react-native-gesture-handler": ">=2", "react-native-reanimated": ">=3", "react-native-safe-area-context": "*", - "react-native-svg": ">=14" + "react-native-svg": ">=14", + "storybook": "9.0.0-alpha.8" }, "engines": { "node": ">=18.0.0" diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx index 7fb3f4bbdd..c19cb839a2 100644 --- a/packages/react-native-ui/src/Layout.tsx +++ b/packages/react-native-ui/src/Layout.tsx @@ -1,6 +1,6 @@ -import { SET_CURRENT_STORY } from '@storybook/core/core-events'; -import { addons } from '@storybook/core/manager-api'; -import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types'; +import { SET_CURRENT_STORY } from 'storybook/internal/core-events'; +import { addons } from 'storybook/internal/manager-api'; +import { type API_IndexHash, type Args, type StoryContext } from 'storybook/internal/types'; import type { ReactRenderer } from '@storybook/react'; import { styled, useTheme } from '@storybook/react-native-theming'; import { ReactNode, useRef, useState, useCallback } from 'react'; diff --git a/packages/react-native-ui/src/MobileAddonsPanel.tsx b/packages/react-native-ui/src/MobileAddonsPanel.tsx index 75d2f46ce1..dd15d1aa2b 100644 --- a/packages/react-native-ui/src/MobileAddonsPanel.tsx +++ b/packages/react-native-ui/src/MobileAddonsPanel.tsx @@ -1,7 +1,7 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet'; -import { addons } from '@storybook/core/manager-api'; +import { addons } from 'storybook/internal/manager-api'; import { styled } from '@storybook/react-native-theming'; -import { Addon_TypesEnum } from '@storybook/core/types'; +import { Addon_TypesEnum } from 'storybook/internal/types'; import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'; import { Platform, StyleProp, Text, View, ViewStyle, useWindowDimensions } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; diff --git a/packages/react-native-ui/src/Refs.tsx b/packages/react-native-ui/src/Refs.tsx index 6da5af38fb..d3164d8247 100644 --- a/packages/react-native-ui/src/Refs.tsx +++ b/packages/react-native-ui/src/Refs.tsx @@ -1,6 +1,6 @@ import type { FC } from 'react'; import React, { useMemo, useCallback, useEffect, useState } from 'react'; -import type { State } from '@storybook/core/manager-api'; +import type { State } from 'storybook/internal/manager-api'; import { styled } from '@storybook/react-native-theming'; import { Tree } from './Tree'; import type { RefType } from './types'; diff --git a/packages/react-native-ui/src/Search.tsx b/packages/react-native-ui/src/Search.tsx index ab7020a155..6ad6b4c4b8 100644 --- a/packages/react-native-ui/src/Search.tsx +++ b/packages/react-native-ui/src/Search.tsx @@ -1,8 +1,8 @@ -import { BottomSheetTextInput } from '@gorhom/bottom-sheet'; +import { BottomSheetTextInput, useBottomSheetInternal } from '@gorhom/bottom-sheet'; import { styled } from '@storybook/react-native-theming'; import type { IFuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; -import React, { useCallback, useDeferredValue, useRef, useState } from 'react'; +import React, { useCallback, useContext, useDeferredValue, useRef, useState } from 'react'; import { Platform, TextInput, View } from 'react-native'; import { CloseIcon } from './icon/CloseIcon'; import { SearchIcon } from './icon/SearchIcon'; @@ -16,7 +16,6 @@ import { type SearchResult, type Selection, } from './types'; -import { getGroupStatus, getHighestStatus } from './util/status'; import { searchItem } from './util/tree'; import { useSelectedNode } from './SelectedNodeProvider'; @@ -106,6 +105,9 @@ export const Search = React.memo<{ getLastViewed: () => Selection[]; initialQuery?: string; }>(function Search({ children, dataset, setSelection, getLastViewed, initialQuery = '' }) { + const context = useBottomSheetInternal(true); + const isBottomSheet = context !== null; + const inputRef = useRef(null); const [inputValue, setInputValue] = useState(initialQuery); const [isOpen, setIsOpen] = useState(false); @@ -153,20 +155,11 @@ export const Search = React.memo<{ ); const makeFuse = useCallback(() => { - const list = dataset.entries.reduce((acc, [refId, { index, status }]) => { - const groupStatus = getGroupStatus(index || {}, status); - + const list = dataset.entries.reduce((acc, [refId, { index }]) => { if (index) { acc.push( ...Object.values(index).map((item) => { - const statusValue = - status && status[item.id] - ? getHighestStatus(Object.values(status[item.id] || {}).map((s) => s.status)) - : null; - return { - ...searchItem(item, dataset.hash[refId]), - status: statusValue || groupStatus[item.id] || null, - }; + return searchItem(item, dataset.hash[refId]); }) ); } @@ -235,7 +228,7 @@ export const Search = React.memo<{ - {isMobile ? ( + {isBottomSheet ? ( getGroupStatus(collapsedData, status), [collapsedData, status]); - const treeItems = useMemo(() => { return collapsedItems.map((itemId) => { const item = collapsedData[itemId]; @@ -330,7 +328,6 @@ export const Tree = React.memo<{ } const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]); - const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null; return ( itemId === oid || itemId.startsWith(`${oid}-`))} isDisplayed={isDisplayed} @@ -356,7 +353,6 @@ export const Tree = React.memo<{ docsMode, expandableDescendants, expanded, - groupStatus, onSelectStoryId, orphanIds, refId, diff --git a/packages/react-native-ui/src/hooks/useExpanded.ts b/packages/react-native-ui/src/hooks/useExpanded.ts index fb489ec228..e1b28d02ab 100644 --- a/packages/react-native-ui/src/hooks/useExpanded.ts +++ b/packages/react-native-ui/src/hooks/useExpanded.ts @@ -1,4 +1,4 @@ -import type { StoriesHash } from '@storybook/core/manager-api'; +import type { StoriesHash } from 'storybook/internal/manager-api'; import type { Dispatch, Reducer } from 'react'; import { useCallback, useEffect, useReducer } from 'react'; import { getAncestorIds } from '../util/tree'; diff --git a/packages/react-native-ui/src/mockdata.ts b/packages/react-native-ui/src/mockdata.ts index e725ed7d45..6d653c29ec 100644 --- a/packages/react-native-ui/src/mockdata.ts +++ b/packages/react-native-ui/src/mockdata.ts @@ -1,4 +1,4 @@ -import type { API_HashEntry } from '@storybook/core/types'; +import type { API_HashEntry } from 'storybook/internal/types'; export type MockDataSet = Record>>; diff --git a/packages/react-native-ui/src/types.ts b/packages/react-native-ui/src/types.ts index 01496e46f4..1109a68715 100644 --- a/packages/react-native-ui/src/types.ts +++ b/packages/react-native-ui/src/types.ts @@ -1,10 +1,10 @@ -import type { StoriesHash, State } from '@storybook/core/manager-api'; -import type { API_StatusState, API_StatusValue } from '@storybook/core/types'; +import type { StoriesHash, State } from 'storybook/internal/manager-api'; +import type { StatusValue, StatusesByStoryIdAndTypeId } from 'storybook/internal/types'; import * as Fuse from 'fuse.js'; import { PressableProps } from 'react-native'; export type Refs = State['refs']; -export type RefType = Refs[keyof Refs] & { status?: API_StatusState }; +export type RefType = Refs[keyof Refs] & { allStatuses?: StatusesByStoryIdAndTypeId }; export type Item = StoriesHash[keyof StoriesHash]; export type Dataset = Record; @@ -38,7 +38,7 @@ export interface ExpandType { export type SearchItem = Item & { refId: string; path: string[]; - status?: API_StatusValue; + status?: StatusValue; showAll?: () => void; }; diff --git a/packages/react-native-ui/src/util/StoryHash.ts b/packages/react-native-ui/src/util/StoryHash.ts index 65b276854e..26703df93b 100644 --- a/packages/react-native-ui/src/util/StoryHash.ts +++ b/packages/react-native-ui/src/util/StoryHash.ts @@ -1,5 +1,5 @@ import { sanitize } from '@storybook/csf'; -import { type API, type State } from '@storybook/core/manager-api'; +import { type API, type State } from 'storybook/internal/manager-api'; import type { API_ComponentEntry, API_DocsEntry, @@ -14,7 +14,7 @@ import type { IndexEntry, StoryIndexV2, StoryIndexV3, -} from '@storybook/core/types'; +} from 'storybook/internal/types'; import countBy from 'lodash/countBy.js'; import { dedent } from 'ts-dedent'; type ToStoriesHashOptions = { @@ -27,7 +27,7 @@ type ToStoriesHashOptions = { import isEqual from 'lodash/isEqual.js'; import mergeWith from 'lodash/mergeWith.js'; -import { logger } from '@storybook/core/client-logger'; +import { logger } from 'storybook/internal/client-logger'; const merge = (a: TObj, b: Partial) => mergeWith({}, a, b, (objValue: TObj, srcValue: Partial) => { diff --git a/packages/react-native-ui/src/util/status.tsx b/packages/react-native-ui/src/util/status.tsx index 430ebd32ee..b71dfa6584 100644 --- a/packages/react-native-ui/src/util/status.tsx +++ b/packages/react-native-ui/src/util/status.tsx @@ -1,5 +1,9 @@ import { useMemo, type ReactElement } from 'react'; -import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/core/types'; +import type { + API_HashEntry, + StatusValue, + StatusesByStoryIdAndTypeId, +} from 'storybook/internal/types'; import { useTheme } from '@storybook/react-native-theming'; @@ -29,19 +33,33 @@ function LoadingIcons(props: SvgProps) { return ; } -export const statusPriority: API_StatusValue[] = ['unknown', 'pending', 'success', 'warn', 'error']; -export const statusMapping: Record = { - unknown: [null, null], - pending: [, 'currentColor'], - success: [, 'currentColor'], - warn: [, '#A15C20'], - error: [, 'brown'], +export const statusMapping: Record = { + ['status-value:unknown']: [null, null], + ['status-value:pending']: [, 'currentColor'], + ['status-value:success']: [, 'currentColor'], + ['status-value:warning']: [, '#A15C20'], + ['status-value:error']: [, 'brown'], }; -export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => { +// export const getHighestStatus = (statuses: API_StatusValue[]): API_StatusValue => { +// return statusPriority.reduce( +// (acc, status) => (statuses.includes(status) ? status : acc), +// 'unknown' +// ); +// }; + +export const statusPriority: StatusValue[] = [ + 'status-value:unknown', + 'status-value:pending', + 'status-value:success', + 'status-value:warning', + 'status-value:error', +]; + +export const getMostCriticalStatusValue = (statusValues: StatusValue[]): StatusValue => { return statusPriority.reduce( - (acc, status) => (statuses.includes(status) ? status : acc), - 'unknown' + (acc, value) => (statusValues.includes(value) ? value : acc), + 'status-value:unknown' ); }; @@ -49,16 +67,16 @@ export function getGroupStatus( collapsedData: { [x: string]: Partial; }, - status: API_StatusState -): Record { - return Object.values(collapsedData).reduce>((acc, item) => { + allStatuses: StatusesByStoryIdAndTypeId +): Record { + return Object.values(collapsedData).reduce>((acc, item) => { if (item.type === 'group' || item.type === 'component') { const leafs = getDescendantIds(collapsedData as any, item.id, false) .map((id) => collapsedData[id]) .filter((i) => i.type === 'story'); - const combinedStatus = getHighestStatus( - leafs.flatMap((story) => Object.values(status?.[story.id] || {})).map((s) => s.status) + const combinedStatus = getMostCriticalStatusValue( + leafs.flatMap((story) => Object.values(allStatuses[story.id] || {})).map((s) => s.value) ); if (combinedStatus) { diff --git a/packages/react-native-ui/src/util/tree.ts b/packages/react-native-ui/src/util/tree.ts index bb6ec46851..bf04861162 100644 --- a/packages/react-native-ui/src/util/tree.ts +++ b/packages/react-native-ui/src/util/tree.ts @@ -1,6 +1,6 @@ import memoize from 'memoizerific'; import type { SyntheticEvent } from 'react'; -import type { IndexHash } from '@storybook/core/manager-api'; +import type { IndexHash } from 'storybook/internal/manager-api'; import { DEFAULT_REF_ID } from '../constants'; import type { Item, RefType, Dataset, SearchItem } from '../types'; diff --git a/packages/react-native/babel.config.js b/packages/react-native/babel.config.js index 08ec9d73c6..46ee04c0b7 100644 --- a/packages/react-native/babel.config.js +++ b/packages/react-native/babel.config.js @@ -1,4 +1,4 @@ // note this file is used by jest to make it not shit itself module.exports = { - presets: ['module:@react-native/babel-preset'], + presets: ['babel-preset-expo'], }; diff --git a/packages/react-native/jest.config.js b/packages/react-native/jest.config.js index b74671f8d5..195d17acdd 100644 --- a/packages/react-native/jest.config.js +++ b/packages/react-native/jest.config.js @@ -1,13 +1,8 @@ /** @type {import('jest').Config} */ const config = { - preset: 'react-native', - modulePathIgnorePatterns: ['dist/'], - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], - transformIgnorePatterns: ['node_modules/(?!react-native|@react-native)'], - setupFilesAfterEnv: ['/../../node_modules/react-native-gesture-handler/jestSetup.js'], - transform: { - '^.+\\.(js)$': ['babel-jest', { plugins: ['babel-plugin-syntax-hermes-parser'] }], - '^.+\\.(ts|tsx)$': 'babel-jest', - }, + preset: 'jest-expo', + transformIgnorePatterns: [ + 'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook/.*|@storybook/.*|uuid)', + ], }; module.exports = config; diff --git a/packages/react-native/package.json b/packages/react-native/package.json index a797551615..2fbc0ecca7 100644 --- a/packages/react-native/package.json +++ b/packages/react-native/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native", - "version": "8.6.2", + "version": "9.0.0-alpha.8", "description": "A better way to develop React Native Components for your app", "keywords": [ "react", @@ -25,7 +25,8 @@ ".": "./dist/index.js", "./metro/withStorybook": "./dist/metro/withStorybook.js", "./preview": "./dist/preview.js", - "./scripts/generate": "./scripts/generate.js" + "./scripts/generate": "./scripts/generate.js", + "./preset": "./preset.js" }, "files": [ "bin/**/*", @@ -45,19 +46,17 @@ "test:update": "jest --updateSnapshot" }, "dependencies": { - "@storybook/core": "^8.6.6", "@storybook/csf": "^0.1.13", "@storybook/global": "^5.0.0", - "@storybook/react": "^8.6.6", - "@storybook/react-native-theming": "^8.6.2", - "@storybook/react-native-ui": "^8.6.2", + "@storybook/react": "9.0.0-alpha.8", + "@storybook/react-native-theming": "^9.0.0-alpha.8", + "@storybook/react-native-ui": "^9.0.0-alpha.8", "commander": "^8.2.0", "dedent": "^1.5.1", "deepmerge": "^4.3.0", "prettier": "^2.4.1", "react-native-url-polyfill": "^2.0.0", "setimmediate": "^1.0.5", - "storybook": "^8.6.6", "type-fest": "~2.19", "util": "^0.12.4", "ws": "^8.18.0" @@ -66,12 +65,14 @@ "@types/jest": "^29.4.3", "@types/react": "~18.3.12", "babel-jest": "^29.7.0", - "babel-plugin-syntax-hermes-parser": "^0.25.0", + "babel-preset-expo": "^12.0.9", "jest": "^29.7.0", + "jest-expo": "~52.0.6", "jotai": "^2.6.2", "react": "18.3.1", "react-native": "0.76.7", "react-test-renderer": "^18.3.1", + "storybook": "9.0.0-alpha.8", "tsup": "^7.2.0", "typescript": "^5.3.3" }, @@ -80,7 +81,8 @@ "react": "*", "react-native": ">=0.72.0", "react-native-gesture-handler": ">=2", - "react-native-safe-area-context": "*" + "react-native-safe-area-context": "*", + "storybook": "9.0.0-alpha.8" }, "engines": { "node": ">=8.0.0" diff --git a/packages/react-native/preset.js b/packages/react-native/preset.js new file mode 100644 index 0000000000..ed3d2a0a2d --- /dev/null +++ b/packages/react-native/preset.js @@ -0,0 +1,2 @@ +// just to be a valid framework +module.exports = {}; diff --git a/packages/react-native/scripts/common.js b/packages/react-native/scripts/common.js index 0f1f16900c..13914d8d2c 100644 --- a/packages/react-native/scripts/common.js +++ b/packages/react-native/scripts/common.js @@ -1,4 +1,4 @@ -const { globToRegexp, serverRequire } = require('@storybook/core/common'); +const { globToRegexp, serverRequire } = require('storybook/internal/common'); const path = require('path'); const fs = require('fs'); diff --git a/packages/react-native/scripts/generate.js b/packages/react-native/scripts/generate.js index 8c2015ee5e..641a987fdc 100644 --- a/packages/react-native/scripts/generate.js +++ b/packages/react-native/scripts/generate.js @@ -6,7 +6,7 @@ const { resolveAddonFile, getAddonName, } = require('./common'); -const { normalizeStories, globToRegexp } = require('@storybook/core/common'); +const { normalizeStories, globToRegexp } = require('storybook/internal/common'); const fs = require('fs'); const prettier = require('prettier'); const path = require('path'); diff --git a/packages/react-native/scripts/generate.test.js b/packages/react-native/scripts/generate.test.js index 03747101c1..4dc4b582a4 100644 --- a/packages/react-native/scripts/generate.test.js +++ b/packages/react-native/scripts/generate.test.js @@ -4,6 +4,8 @@ const { generate } = require('./generate'); let pathMock; let fileContentMock; +global.window.navigator = {}; + jest.mock('fs', () => ({ ...jest.requireActual('fs'), writeFileSync: (filePath, fileContent, opts) => { diff --git a/packages/react-native/scripts/handle-args.js b/packages/react-native/scripts/handle-args.js index c051b5ddea..8a8978daae 100644 --- a/packages/react-native/scripts/handle-args.js +++ b/packages/react-native/scripts/handle-args.js @@ -6,7 +6,7 @@ function getArguments() { .option( '-c, --config-path ', 'The path to your config folder relative to your project-dir', - './.storybook' + './.rnstorybook' ) .option('-js, --use-js', 'Use a js file for storybook.requires') .option('-a, --absolute', 'Use absolute paths for story imports'); diff --git a/packages/react-native/src/Start.test.ts b/packages/react-native/src/Start.test.ts index 38b3714355..e5685e4312 100644 --- a/packages/react-native/src/Start.test.ts +++ b/packages/react-native/src/Start.test.ts @@ -1,5 +1,8 @@ import { prepareStories } from './Start'; +// @ts-ignore +global.window.navigator = {}; + describe('prepareStories', () => { test('prepares a standard CSF story file', () => { const req = () => { diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx index bae015da98..14a5c68b65 100644 --- a/packages/react-native/src/Start.tsx +++ b/packages/react-native/src/Start.tsx @@ -16,22 +16,24 @@ if (Platform.OS !== 'web') { } } -import { addons as managerAddons } from '@storybook/core/manager-api'; +import { addons as managerAddons } from 'storybook/internal/manager-api'; import { composeConfigs, addons as previewAddons, PreviewWithSelection, + View as PreviewView, + SelectionStore, sortStoriesV7, userOrAutoTitleFromSpecifier, -} from '@storybook/core/preview-api'; +} from 'storybook/internal/preview-api'; import { isExportStory, storyNameFromExport, toId } from '@storybook/csf'; // NOTE this really should be exported from preview-api, but it's not -import { createBrowserChannel } from '@storybook/core/channels'; +import { createBrowserChannel } from 'storybook/internal/channels'; import type { Addon_StorySortParameterV7, NormalizedStoriesSpecifier, StoryIndex, -} from '@storybook/core/types'; +} from 'storybook/internal/types'; import type { ReactRenderer } from '@storybook/react'; import { View } from './View'; @@ -109,6 +111,7 @@ export function prepareStories({ if (title) { const nameFromExport = storyNameFromExport(key); const id = toId(title, nameFromExport); + const name = exportValue?.name || exportValue?.storyName || nameFromExport; index.entries[id] = { @@ -211,7 +214,13 @@ export function start({ const previewView = { prepareForStory: () => { - return <>; + return { + component: () => <>, + canvasElement: null, + mount: () => Promise.resolve({}), + storyResult: null, + T: null, + }; }, prepareForDocs: (): any => {}, showErrorDisplay: (e) => { @@ -224,8 +233,7 @@ export function start({ showPreparingStory: () => {}, showStory: () => {}, showStoryDuringRender: () => {}, - // TODO what happened to this type? - } as any; + } satisfies PreviewView; const selectionStore = { selection: null, @@ -234,7 +242,7 @@ export function start({ setSelection: (selection) => { preview.selectionStore.selection = selection; }, - }; + } satisfies SelectionStore; const getProjectAnnotationsInitial = async () => composeConfigs([ @@ -261,7 +269,7 @@ export function start({ async (importPath: string) => importMap[importPath], getProjectAnnotationsInitial, selectionStore, - previewView + previewView as any ); const view = new View(preview, channel); diff --git a/packages/react-native/src/View.tsx b/packages/react-native/src/View.tsx index 6bec5fc7e6..e4c06c8306 100644 --- a/packages/react-native/src/View.tsx +++ b/packages/react-native/src/View.tsx @@ -1,9 +1,9 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; -import { Channel, WebsocketTransport } from '@storybook/core/channels'; -import Events from '@storybook/core/core-events'; -import { addons as managerAddons } from '@storybook/core/manager-api'; -import { PreviewWithSelection, addons as previewAddons } from '@storybook/core/preview-api'; -import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from '@storybook/core/types'; +import { Channel, WebsocketTransport } from 'storybook/internal/channels'; +import Events from 'storybook/internal/core-events'; +import { addons as managerAddons } from 'storybook/internal/manager-api'; +import { PreviewWithSelection, addons as previewAddons } from 'storybook/internal/preview-api'; +import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from 'storybook/internal/types'; import { StoryContext, toId } from '@storybook/csf'; import type { ReactRenderer } from '@storybook/react'; import { Theme, ThemeProvider, darkTheme, theme } from '@storybook/react-native-theming'; diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts index 91d89e2271..e07a36a512 100644 --- a/packages/react-native/src/index.ts +++ b/packages/react-native/src/index.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig as StorybookConfigBase } from '@storybook/core/types'; +import type { StorybookConfig as StorybookConfigBase } from 'storybook/internal/types'; import type { ReactNativeOptions } from './Start'; export { darkTheme, theme, type Theme } from '@storybook/react-native-theming'; @@ -8,4 +8,5 @@ export interface StorybookConfig { stories: StorybookConfigBase['stories']; addons: Array }>; reactNative?: ReactNativeOptions; + framework?: '@storybook/react-native'; } diff --git a/packages/react-native/src/metro/withStorybook.ts b/packages/react-native/src/metro/withStorybook.ts index dda511c402..1a7e8f8db2 100644 --- a/packages/react-native/src/metro/withStorybook.ts +++ b/packages/react-native/src/metro/withStorybook.ts @@ -23,7 +23,7 @@ interface WebsocketsOptions { */ interface WithStorybookOptions { /** - * The path to the Storybook config folder. Defaults to './.storybook'. + * The path to the Storybook config folder. Defaults to './.rnstorybook'. */ configPath?: string; @@ -68,7 +68,7 @@ type ResolveRequestFunction = (context: any, moduleName: string, platform: strin * * module.exports = withStorybook(config, { * enabled: true, - * configPath: path.resolve(projectRoot, './.storybook'), + * configPath: path.resolve(projectRoot, './.rnstorybook'), * websockets: { port: 7007, host: 'localhost' }, * useJs: false, * onDisabledRemoveStorybook: true, @@ -140,7 +140,7 @@ function withStorybook( } generate({ - configPath: configPath ?? path.resolve(process.cwd(), './.storybook'), + configPath: configPath ?? path.resolve(process.cwd(), './.rnstorybook'), useJs, }); diff --git a/packages/react-native/src/types/index.ts b/packages/react-native/src/types/index.ts index 3f7ea6c829..5c6b6ceddb 100644 --- a/packages/react-native/src/types/index.ts +++ b/packages/react-native/src/types/index.ts @@ -1,4 +1,4 @@ -import type { LoaderFunction } from '@storybook/core/types'; +import type { LoaderFunction } from 'storybook/internal/types'; export interface RequireContext { keys: () => string[]; diff --git a/packages/react-native/template/cli/stories/Button.stories.tsx b/packages/react-native/template/cli/stories/Button.stories.tsx new file mode 100644 index 0000000000..cb852dfbe4 --- /dev/null +++ b/packages/react-native/template/cli/stories/Button.stories.tsx @@ -0,0 +1,53 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { View } from 'react-native'; +import { fn } from 'storybook/test'; + +import { Button } from './Button'; + +const meta = { + title: 'Example/Button', + component: Button, + decorators: [ + (Story) => ( + + + + ), + ], + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], + // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args + args: { onPress: fn() }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + label: 'Button', + }, +}; + +export const Large: Story = { + args: { + size: 'large', + label: 'Button', + }, +}; + +export const Small: Story = { + args: { + size: 'small', + label: 'Button', + }, +}; diff --git a/packages/react-native/template/cli/stories/Button.tsx b/packages/react-native/template/cli/stories/Button.tsx new file mode 100644 index 0000000000..ed17e64a3d --- /dev/null +++ b/packages/react-native/template/cli/stories/Button.tsx @@ -0,0 +1,101 @@ +import type { StyleProp, ViewStyle } from 'react-native'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +export interface ButtonProps { + /** Is this the principal call to action on the page? */ + primary?: boolean; + /** What background color to use */ + backgroundColor?: string; + /** How large should the button be? */ + size?: 'small' | 'medium' | 'large'; + /** Button contents */ + label: string; + /** Optional click handler */ + onPress?: () => void; + style?: StyleProp; +} + +/** Primary UI component for user interaction */ +export const Button = ({ + primary = false, + size = 'medium', + backgroundColor, + label, + style, + onPress, +}: ButtonProps) => { + const modeStyle = primary ? styles.primary : styles.secondary; + const textModeStyle = primary ? styles.primaryText : styles.secondaryText; + + const sizeStyle = styles[size]; + const textSizeStyle = textSizeStyles[size]; + + return ( + + + {label} + + + ); +}; + +const styles = StyleSheet.create({ + button: { + borderWidth: 0, + borderRadius: 48, + }, + buttonText: { + fontWeight: '700', + lineHeight: 1, + }, + primary: { + backgroundColor: '#1ea7fd', + }, + primaryText: { + color: 'white', + }, + secondary: { + backgroundColor: 'transparent', + borderColor: 'rgba(0, 0, 0, 0.15)', + borderWidth: 1, + }, + secondaryText: { + color: '#333', + }, + small: { + paddingVertical: 10, + paddingHorizontal: 16, + }, + smallText: { + fontSize: 12, + }, + medium: { + paddingVertical: 11, + paddingHorizontal: 20, + }, + mediumText: { + fontSize: 14, + }, + large: { + paddingVertical: 12, + paddingHorizontal: 24, + }, + largeText: { + fontSize: 16, + }, +}); + +const textSizeStyles = { + small: styles.smallText, + medium: styles.mediumText, + large: styles.largeText, +}; diff --git a/packages/react-native/template/cli/stories/Button/Button.stories.tsx b/packages/react-native/template/cli/stories/Button/Button.stories.tsx deleted file mode 100644 index e6d3ff901b..0000000000 --- a/packages/react-native/template/cli/stories/Button/Button.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { View } from 'react-native'; -import type { Meta, StoryObj } from '@storybook/react'; -import { MyButton } from './Button'; - -const meta = { - title: 'MyButton', - component: MyButton, - argTypes: { - onPress: { action: 'pressed the button' }, - }, - args: { - text: 'Hello world', - }, - decorators: [ - (Story) => ( - - - - ), - ], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Basic: Story = {}; - -export const AnotherExample: Story = { - args: { - text: 'Another example', - }, -}; diff --git a/packages/react-native/template/cli/stories/Button/Button.tsx b/packages/react-native/template/cli/stories/Button/Button.tsx deleted file mode 100644 index 9ebcb629f9..0000000000 --- a/packages/react-native/template/cli/stories/Button/Button.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { TouchableOpacity, Text, StyleSheet } from 'react-native'; - -export type MyButtonProps = { - onPress?: () => void; - text: string; -}; - -export const MyButton = ({ onPress, text }: MyButtonProps) => { - return ( - - {text} - - ); -}; - -const styles = StyleSheet.create({ - container: { - paddingHorizontal: 16, - paddingVertical: 8, - backgroundColor: 'purple', - borderRadius: 8, - }, - text: { color: 'white' }, -}); diff --git a/packages/react-native/template/cli/stories/Header.stories.tsx b/packages/react-native/template/cli/stories/Header.stories.tsx new file mode 100644 index 0000000000..029f040b03 --- /dev/null +++ b/packages/react-native/template/cli/stories/Header.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Header } from './Header'; + +const meta = { + title: 'Example/Header', + component: Header, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs + tags: ['autodocs'], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const LoggedIn: Story = { + args: { + user: { + name: 'Jane Doe', + }, + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; + +export const LoggedOut: Story = { + args: { + onLogin: () => {}, + onLogout: () => {}, + onCreateAccount: () => {}, + }, +}; diff --git a/packages/react-native/template/cli/stories/Header.tsx b/packages/react-native/template/cli/stories/Header.tsx new file mode 100644 index 0000000000..b52e6efae0 --- /dev/null +++ b/packages/react-native/template/cli/stories/Header.tsx @@ -0,0 +1,76 @@ +import { StyleSheet, Text, View } from 'react-native'; + +import { Button } from './Button'; + +export type HeaderProps = { + user?: { name: string }; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +}; + +export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => ( + + + + Acme + + + {user ? ( + <> + Welcome, + {user.name}! + +