chore: use composestories instead of story (#556)

examples/expo-example/components/ActionExample/Actions.test.tsx

@@ -1,15 +1,15 @@
 import { render, screen, userEvent } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Actions.stories';
+import { composeStories } from '@storybook/react';
+import * as Actions from './Actions.stories';
 
-const ActionsStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(Actions);
 
 test('action story renders and onpress works', async () => {
   jest.useFakeTimers();
 
   const onPress = jest.fn();
 
-  render(<ActionsStory onPress={onPress} />);
+  render(<Basic onPress={onPress} />);
 
   const user = userEvent.setup({});
 

examples/expo-example/components/BackgroundExample/BackgroundCsf.test.tsx

@@ -1,12 +1,12 @@
 import '@testing-library/react-native/extend-expect';
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './BackgroundCsf.stories';
+import { composeStories } from '@storybook/react';
+import * as Backgrounds from './BackgroundCsf.stories';
 
-const BackgroundCsfStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(Backgrounds);
 
 test('Background colour is hotpink', () => {
-  render(<BackgroundCsfStory />);
+  render(<Basic />);
 
   expect(screen.getByTestId('addon-backgrounds-container')).toHaveStyle({
     backgroundColor: 'hotpink',

examples/expo-example/components/ControlExamples/Array/Array.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Array.stories';
+import { composeStories } from '@storybook/react';
+import * as ArrayStories from './Array.stories';
 
-const ArrayStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(ArrayStories);
 
 test('array story renders', () => {
-  render(<ArrayStory />);
+  render(<Basic />);
 
   expect(screen.getByTestId('array-story-container')).toHaveTextContent(/abc/);
 });

examples/expo-example/components/ControlExamples/Boolean/Boolean.test.tsx

@@ -1,18 +1,17 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic, On } from './Boolean.stories';
+import { composeStories } from '@storybook/react';
+import * as BooleanStories from './Boolean.stories';
 
-const BooleanStory = composeStory(Basic, Meta);
-const OnStory = composeStory(On, Meta);
+const { Basic, On } = composeStories(BooleanStories);
 
 test('boolean story renders', () => {
-  render(<BooleanStory />);
+  render(<Basic />);
 
   screen.getByText('off');
 });
 
 test('boolean story renders on', () => {
-  render(<OnStory />);
+  render(<On />);
 
   screen.getByText('on');
 });

examples/expo-example/components/ControlExamples/Color/Color.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { ColorExample } from './Color.stories';
+import { composeStories } from '@storybook/react';
+import * as Color from './Color.stories';
 
-const ColorStory = composeStory(ColorExample, Meta);
+const { ColorExample } = composeStories(Color);
 
 test('color story renders', () => {
-  render(<ColorStory />);
+  render(<ColorExample />);
 
   expect(screen.getByTestId('color-story-container')).toHaveStyle({ backgroundColor: '#a819b9' });
 });

examples/expo-example/components/ControlExamples/Date/Date.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Date.stories';
+import { composeStories } from '@storybook/react';
+import * as DateStories from './Date.stories';
 
-const DateStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(DateStories);
 
 test('date story renders', () => {
-  render(<DateStory />);
+  render(<Basic />);
 
   const date = new Date(1983, 1, 25);
 

examples/expo-example/components/ControlExamples/Number/Number.test.tsx

@@ -1,18 +1,17 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic, Range } from './Number.stories';
+import { composeStories } from '@storybook/react';
+import * as NumberStories from './Number.stories';
 
-const BasicStory = composeStory(Basic, Meta);
-const RangeStory = composeStory(Range, Meta);
+const { Basic, Range } = composeStories(NumberStories);
 
 test('basic story renders', async () => {
-  render(<BasicStory />);
+  render(<Basic />);
 
   await screen.findByText(/5 x 3 = 15/);
 });
 
 test('range story renders', async () => {
-  render(<RangeStory />);
+  render(<Range />);
 
   await screen.findByText(/6 x 7 = 42/);
 });

examples/expo-example/components/ControlExamples/Object/Object.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Object.stories';
+import { composeStories } from '@storybook/react';
+import * as ObjectStory from './Object.stories';
 
-const ObjectStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(ObjectStory);
 
 test('object story renders', () => {
-  render(<ObjectStory />);
+  render(<Basic />);
 
   screen.getByText('title: Blade Runner');
   screen.getByText('genre: Sci Fi');

examples/expo-example/components/ControlExamples/Radio/Radio.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Radio.stories';
+import { composeStories } from '@storybook/react';
+import * as RadioStories from './Radio.stories';
 
-const RadioStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(RadioStories);
 
 test('radio story renders', () => {
-  render(<RadioStory />);
+  render(<Basic />);
 
   screen.getByText('104.8MHz');
 });

examples/expo-example/components/ControlExamples/Select/Select.test.tsx

@@ -1,25 +1,23 @@
 import { screen, render } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic, WithLabels, WithMapping } from './Select.stories';
+import { composeStories } from '@storybook/react';
+import * as SelectStories from './Select.stories';
 
-const SelectStory = composeStory(Basic, Meta);
-const SelectWithLabelsStory = composeStory(WithLabels, Meta);
-const SelectWithMappingStory = composeStory(WithMapping, Meta);
+const { Basic, WithLabels, WithMapping } = composeStories(SelectStories);
 
 test('select story renders', () => {
-  render(<SelectStory />);
+  render(<Basic />);
 
   screen.getByText('Selected: ⬅️');
 });
 
 test('select with labels story renders', () => {
-  render(<SelectWithLabelsStory />);
+  render(<WithLabels />);
 
   screen.getByText('Selected: ⬆');
 });
 
 test('select with mapping story renders', () => {
-  render(<SelectWithMappingStory />);
+  render(<WithMapping />);
 
   screen.getByText('Selected: ⬆');
 });

examples/expo-example/components/ControlExamples/Text/Text.test.tsx

@@ -1,11 +1,11 @@
 import { screen, render } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './Text.stories';
+import { composeStories } from '@storybook/react';
+import * as TextStories from './Text.stories';
 
-const TextStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(TextStories);
 
 test('text story renders', () => {
-  render(<TextStory />);
+  render(<Basic />);
 
   screen.getByText('Hello world!');
 });

examples/expo-example/components/InputExample/TextInput.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react-native';
-import { composeStory } from '@storybook/react';
-import Meta, { Basic } from './TextInput.stories';
+import { composeStories } from '@storybook/react';
+import * as InputStories from './TextInput.stories';
 
-const TextInputStory = composeStory(Basic, Meta);
+const { Basic } = composeStories(InputStories);
 
 test('text input story renders', () => {
-  render(<TextInputStory />);
+  render(<Basic />);
 
   screen.getByPlaceholderText('Type something');
 });