diff --git a/ROADMAP.md b/ROADMAP.md
index eec067f460..d1c1997192 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,12 +1,9 @@
# Roadmap
-Now that V6.5 is ready, we're looking to the future. Here's what we're working on next:
-
-- Firstly stablise the V6.5 release
-- Version 7
-- Support story categorisation for more organisation in the story list sidebar
-- Experiment with use of metro’s experimental `require.context` to simplify story imports
-- Better testing support, potentially support interaction tests with the play function
-- Better integration with `@storybook/addon-react-native-web`
-- Better way to display addons to avoid shrinking the preview
-- … and more
\ No newline at end of file
+- [x] Create a roadmap
+- [ ] UI overhaul
+ - [ ] Redo theming
+ - [ ] integrate reanimated and gorhom as new dependencies
+ - [ ] New storybook/react-native-ui library for ondevice ui components
+ - [ ] implement new ondevice ui based on storybook v8 mobile design
+- [ ] improve controls api implementation to match more closely web api
diff --git a/examples/expo-example/.storybook-web/main.ts b/examples/expo-example/.storybook-web/main.ts
index 10fa2f4b6e..ed554f5b12 100644
--- a/examples/expo-example/.storybook-web/main.ts
+++ b/examples/expo-example/.storybook-web/main.ts
@@ -17,18 +17,14 @@ const main: ServerStorybookConfig = {
addons: [
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-interactions'),
- getAbsolutePath('@storybook/addon-react-native-web'),
+ '@storybook/addon-react-native-web',
// note why does this break with get absolute?
'@storybook/addon-react-native-server',
],
// logLevel: 'debug',
framework: {
name: '@storybook/react-webpack5',
- options: {
- builder: {
- useSWC: true,
- },
- },
+ options: {},
},
reactNativeServerOptions: {
@@ -36,9 +32,9 @@ const main: ServerStorybookConfig = {
port: 7007,
},
- docs: {
- autodocs: 'tag',
- },
+ // docs: {
+ // autodocs: 'tag',
+ // },
};
export default main;
diff --git a/examples/expo-example/.storybook/index.tsx b/examples/expo-example/.storybook/index.tsx
index 2380f210aa..4c92868bba 100644
--- a/examples/expo-example/.storybook/index.tsx
+++ b/examples/expo-example/.storybook/index.tsx
@@ -7,7 +7,7 @@ const StorybookUIRoot = view.getStorybookUI({
getItem: AsyncStorage.getItem,
setItem: AsyncStorage.setItem,
},
- enableWebsockets: true,
+ // enableWebsockets: true,
// initialSelection: { kind: 'TextInput', name: 'Basic' },
// isUIHidden: true,
diff --git a/examples/expo-example/.storybook/indexV6Mode.tsx b/examples/expo-example/.storybook/indexV6Mode.tsx
deleted file mode 100644
index 7f6c2d632b..0000000000
--- a/examples/expo-example/.storybook/indexV6Mode.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getStorybookUI } from '@storybook/react-native/V6';
-import './storybook.requires';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-const StorybookUIRoot = getStorybookUI({
- shouldPersistSelection: true,
- storage: {
- getItem: AsyncStorage.getItem,
- setItem: AsyncStorage.setItem,
- },
-});
-
-export default StorybookUIRoot;
diff --git a/examples/expo-example/.storybook/main.ts b/examples/expo-example/.storybook/main.ts
index 0617fb1977..3b8df3d9dd 100644
--- a/examples/expo-example/.storybook/main.ts
+++ b/examples/expo-example/.storybook/main.ts
@@ -3,6 +3,7 @@ import { StorybookConfig } from '@storybook/react-native';
const main: StorybookConfig = {
stories: [
'../components/**/*.stories.?(ts|tsx|js|jsx)',
+ '../../../packages/react-native-ui/**/*.stories.?(ts|tsx|js|jsx)',
{
directory: '../other_components',
files: '**/*.stories.?(ts|tsx|js|jsx)',
@@ -16,11 +17,10 @@ const main: StorybookConfig = {
// '../components/**/*.storiesof.?(ts|tsx|js|jsx)',
],
addons: [
- '@storybook/addon-ondevice-notes',
'@storybook/addon-ondevice-controls',
- '@storybook/addon-ondevice-knobs',
'@storybook/addon-ondevice-backgrounds',
'@storybook/addon-ondevice-actions',
+ '@storybook/addon-ondevice-notes',
],
reactNative: {
playFn: false,
diff --git a/examples/expo-example/.storybook/storybook.requires.ts b/examples/expo-example/.storybook/storybook.requires.ts
index 995dfe91d5..0c7deb9167 100644
--- a/examples/expo-example/.storybook/storybook.requires.ts
+++ b/examples/expo-example/.storybook/storybook.requires.ts
@@ -1,16 +1,11 @@
/* do not change this file, it is auto generated by storybook. */
-import {
- start,
- prepareStories,
- getProjectAnnotations,
-} from "@storybook/react-native";
+import { start, updateView } from "@storybook/react-native";
-import "@storybook/addon-ondevice-notes/register";
import "@storybook/addon-ondevice-controls/register";
-import "@storybook/addon-ondevice-knobs/register";
import "@storybook/addon-ondevice-backgrounds/register";
import "@storybook/addon-ondevice-actions/register";
+import "@storybook/addon-ondevice-notes/register";
const normalizedStories = [
{
@@ -26,6 +21,19 @@ const normalizedStories = [
/^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
),
},
+ {
+ titlePrefix: "",
+ directory: "../../packages/react-native-ui",
+ files: "**/*.stories.?(ts|tsx|js|jsx)",
+ importPathMatcher:
+ /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+ // @ts-ignore
+ req: require.context(
+ "../../../packages/react-native-ui",
+ true,
+ /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+ ),
+ },
{
titlePrefix: "OtherComponents",
directory: "./other_components",
@@ -66,18 +74,7 @@ if (!global.view) {
options,
});
} else {
- const { importMap } = prepareStories({
- storyEntries: normalizedStories,
- options,
- });
-
- global.view._preview.onStoriesChanged({
- importFn: async (importPath: string) => importMap[importPath],
- });
-
- global.view._preview.onGetProjectAnnotationsChanged({
- getProjectAnnotations: getProjectAnnotations(global.view, annotations),
- });
+ updateView(global.view, annotations, normalizedStories, options);
}
export const view = global.view;
diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx
index 49bfeecf36..cfb168b52f 100644
--- a/examples/expo-example/App.tsx
+++ b/examples/expo-example/App.tsx
@@ -20,7 +20,6 @@ let AppEntryPoint = App;
if (Constants.expoConfig?.extra?.storybookEnabled === 'true') {
AppEntryPoint = require('./.storybook').default;
- // AppEntryPoint = require('./.storybook/indexV6Mode').default;
}
export default AppEntryPoint;
diff --git a/examples/expo-example/components/ActionExample/Actions.stories.tsx b/examples/expo-example/components/ActionExample/Actions.stories.tsx
index 68c3a23241..de18d24b56 100644
--- a/examples/expo-example/components/ActionExample/Actions.stories.tsx
+++ b/examples/expo-example/components/ActionExample/Actions.stories.tsx
@@ -1,11 +1,12 @@
import type { Meta, StoryObj } from '@storybook/react';
+
import { ActionButton } from './Actions';
const meta = {
title: 'ActionButton',
component: ActionButton,
argTypes: {
- onPress: { action: 'pressed the button' },
+ onPress: { action: 'pressed' },
},
args: {
text: 'Press me!',
diff --git a/examples/expo-example/components/ActionExample/Actions.tsx b/examples/expo-example/components/ActionExample/Actions.tsx
index 769acc6cc3..b26eab37c8 100644
--- a/examples/expo-example/components/ActionExample/Actions.tsx
+++ b/examples/expo-example/components/ActionExample/Actions.tsx
@@ -1,8 +1,7 @@
-import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ActionButtonProps {
- onPress: () => void;
+ onPress?: () => void;
text: string;
}
diff --git a/examples/expo-example/components/BackgroundExample/Background.storiesof.tsx b/examples/expo-example/components/BackgroundExample/Background.storiesof.tsx
deleted file mode 100644
index 3aaf62ef14..0000000000
--- a/examples/expo-example/components/BackgroundExample/Background.storiesof.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { addDecorator, storiesOf } from '@storybook/react-native/V6';
-import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-import { Text } from 'react-native';
-
-// Remember to also include '@storybook/addon-ondevice-backgrounds' in your addons config: see /examples/expo-example/.storybook/main.ts
-addDecorator(withBackgrounds);
-
-storiesOf('BackgroundExample/Background StoriesOf', module)
- .addParameters({
- backgrounds: {
- default: 'warm',
- values: [
- { name: 'warm', value: 'hotpink' },
- { name: 'cool', value: 'deepskyblue' },
- ],
- },
- })
- .add('Basic', () => Change background color via Addons -> Background);
diff --git a/examples/expo-example/components/KnobsExample/KnobsExample.js b/examples/expo-example/components/KnobsExample/KnobsExample.js
deleted file mode 100644
index 68c8f21723..0000000000
--- a/examples/expo-example/components/KnobsExample/KnobsExample.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-export default ({
- backgroundColor,
- name,
- age,
- fruit,
- otherFruit,
- birthday,
- dollars,
- items,
- nice,
- customStyles,
-}) => {
- const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
- const style = { backgroundColor, ...customStyles };
- const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
- const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
- return (
-
- {intro}
- My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}
- My wallet contains: ${dollars.toFixed(2)}
- In my backpack, I have:
-
- {items.map((item) => (
- {item}
- ))}
-
- {salutation}
-
- );
-};
diff --git a/examples/expo-example/components/KnobsExample/KnobsExample.storiesof.js b/examples/expo-example/components/KnobsExample/KnobsExample.storiesof.js
deleted file mode 100644
index def0f1e03a..0000000000
--- a/examples/expo-example/components/KnobsExample/KnobsExample.storiesof.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import {
- array,
- boolean,
- color,
- date,
- number,
- object,
- radios,
- select,
- text,
-} from '@storybook/addon-knobs';
-import { withKnobs } from '@storybook/addon-ondevice-knobs';
-import { storiesOf } from '@storybook/react-native/V6';
-import React from 'react';
-
-import KnobsExample from './KnobsExample';
-
-storiesOf('Knobs Example', module)
- .addDecorator(withKnobs)
- .add('with knobs', () => {
- const name = text('Name', 'Storyteller');
-
- const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
-
- const fruits = {
- Apple: 'apple',
- Banana: 'banana',
- Cherry: 'cherry',
- };
-
- const fruit = select('Fruit', fruits, 'apple');
-
- const otherFruits = {
- Kiwi: 'kiwi',
- Guava: 'guava',
- Watermelon: 'watermelon',
- };
-
- const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
-
- const dollars = number('Dollars', 12.5);
-
- // NOTE: color picker is currently broken
- const backgroundColor = color('background', '#eaeaea');
-
- const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-
- const customStyles = object('Styles', {
- borderWidth: 3,
- borderColor: '#000',
- padding: 10,
- });
-
- const nice = boolean('Nice', true);
-
- const birthday = date('Birthday', new Date(2017, 0, 20));
-
- // eslint-disable-next-line no-unused-vars
- const grouped = text('groupedKnob', '', 'More');
-
- return (
-
- );
- });
diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx
index 9a48e9e2f1..f3bf2f848c 100644
--- a/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx
+++ b/examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx
@@ -16,7 +16,7 @@ export const First: StoryObj = {
};
export const Second: StoryObj = {
- storyName: 'Second Story',
+ name: 'Second Story',
args: {
text: 'Second',
},
diff --git a/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx b/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx
index 9cc38aabad..8d896a1e36 100644
--- a/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx
+++ b/examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx
@@ -17,7 +17,7 @@ export const First: StoryObj = {
};
export const Second: StoryObj = {
- storyName: 'Second Story',
+ name: 'Second Story',
args: {
text: 'Second',
},
diff --git a/examples/expo-example/components/NestingExample/StoryList.stories.ignore.tsx b/examples/expo-example/components/NestingExample/StoryList.stories.ignore.tsx
new file mode 100644
index 0000000000..e698b569ec
--- /dev/null
+++ b/examples/expo-example/components/NestingExample/StoryList.stories.ignore.tsx
@@ -0,0 +1,81 @@
+// import { Meta, StoryObj } from '@storybook/react';
+// import StoryListView from '@storybook/react-native/src/components/StoryListView/StoryListView';
+
+// export default {
+// title: 'StoryListView',
+// component: StoryListView,
+// } as Meta;
+
+// export const Basic: StoryObj = {
+// parameters: { deviceOnly: true },
+// args: {
+// storyIndex: {
+// entries: {
+// 'chat-message--message-first': {
+// id: 'chat-message--message-first',
+// importPath: './components/NestingExample/ChatMessage.stories.tsx',
+// name: 'Message First',
+// title: 'Chat/Message',
+// type: 'story',
+// },
+// 'chat-message--message-second': {
+// id: 'chat-message--message-second',
+// importPath: './components/NestingExample/ChatMessage.stories.tsx',
+// name: 'Message Second',
+// title: 'Chat/Message',
+// type: 'story',
+// },
+// 'chat-message-bubble--first': {
+// id: 'chat-message-bubble--first',
+// importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+// name: 'First',
+// title: 'Chat/Message/bubble',
+// type: 'story',
+// },
+// 'chat-message-bubble--second': {
+// id: 'chat-message-bubble--second',
+// importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+// name: 'Second Story',
+// title: 'Chat/Message/bubble',
+// type: 'story',
+// },
+// 'chat-message-reactions--message-one': {
+// id: 'chat-message-reactions--message-one',
+// importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+// name: 'Message One',
+// title: 'Chat/Message/Reactions',
+// type: 'story',
+// },
+// 'chat-message-reactions--message-two': {
+// id: 'chat-message-reactions--message-two',
+// importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
+// name: 'Message Two',
+// title: 'Chat/Message/Reactions',
+// type: 'story',
+// },
+// 'chat-messageinput--basic': {
+// id: 'chat-messageinput--basic',
+// importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
+// name: 'Basic',
+// title: 'Chat/MessageInput',
+// type: 'story',
+// },
+// 'storylistview--basic': {
+// id: 'storylistview--basic',
+// importPath: './components/NestingExample/StoryList.stories.tsx',
+// name: 'Basic',
+// title: 'StoryListView',
+// type: 'story',
+// },
+// 'text-control--basic': {
+// id: 'text-control--basic',
+// importPath: './components/ControlExamples/Text/Text.stories.tsx',
+// name: 'Basic',
+// title: 'Text control',
+// type: 'story',
+// },
+// },
+// v: 3,
+// },
+// },
+// };
diff --git a/examples/expo-example/components/NestingExample/StoryList.stories.tsx b/examples/expo-example/components/NestingExample/StoryList.stories.tsx
deleted file mode 100644
index 7853354a7b..0000000000
--- a/examples/expo-example/components/NestingExample/StoryList.stories.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import StoryListView from '@storybook/react-native/src/components/StoryListView/StoryListView';
-
-export default {
- title: 'StoryListView',
- component: StoryListView,
-} as Meta;
-
-export const Basic: StoryObj = {
- parameters: { deviceOnly: true },
- args: {
- storyIndex: {
- entries: {
- 'chat-message--message-first': {
- id: 'chat-message--message-first',
- importPath: './components/NestingExample/ChatMessage.stories.tsx',
- name: 'Message First',
- title: 'Chat/Message',
- type: 'story',
- },
- 'chat-message--message-second': {
- id: 'chat-message--message-second',
- importPath: './components/NestingExample/ChatMessage.stories.tsx',
- name: 'Message Second',
- title: 'Chat/Message',
- type: 'story',
- },
- 'chat-message-bubble--first': {
- id: 'chat-message-bubble--first',
- importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
- name: 'First',
- title: 'Chat/Message/bubble',
- type: 'story',
- },
- 'chat-message-bubble--second': {
- id: 'chat-message-bubble--second',
- importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
- name: 'Second Story',
- title: 'Chat/Message/bubble',
- type: 'story',
- },
- 'chat-message-reactions--message-one': {
- id: 'chat-message-reactions--message-one',
- importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
- name: 'Message One',
- title: 'Chat/Message/Reactions',
- type: 'story',
- },
- 'chat-message-reactions--message-two': {
- id: 'chat-message-reactions--message-two',
- importPath: './components/NestingExample/ChatMessageReactions.stories.tsx',
- name: 'Message Two',
- title: 'Chat/Message/Reactions',
- type: 'story',
- },
- 'chat-messageinput--basic': {
- id: 'chat-messageinput--basic',
- importPath: './components/NestingExample/ChatMessageMessageInput.stories.tsx',
- name: 'Basic',
- title: 'Chat/MessageInput',
- type: 'story',
- },
- 'storylistview--basic': {
- id: 'storylistview--basic',
- importPath: './components/NestingExample/StoryList.stories.tsx',
- name: 'Basic',
- title: 'StoryListView',
- type: 'story',
- },
- 'text-control--basic': {
- id: 'text-control--basic',
- importPath: './components/ControlExamples/Text/Text.stories.tsx',
- name: 'Basic',
- title: 'Text control',
- type: 'story',
- },
- },
- v: 3,
- },
- },
-};
diff --git a/examples/expo-example/components/PromiseTest/Button.storiesof.tsx b/examples/expo-example/components/PromiseTest/Button.storiesof.tsx
deleted file mode 100644
index b903d8d702..0000000000
--- a/examples/expo-example/components/PromiseTest/Button.storiesof.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { storiesOf } from '@storybook/react-native/V6';
-import React, { useState } from 'react';
-import { Button } from './Button';
-
-storiesOf('button promise', module)
- .add(
- 'finally',
- () => {
- const [text, setText] = useState('Do a promise');
- const testing = () => {
- const timeout = new Promise((resolve) => {
- setTimeout(() => {
- resolve('Promise resolved');
- }, 1000);
- });
- timeout
- .then((res: string) => {
- setText(res);
- })
- .finally(() => {
- setText('Done!');
- });
- };
- return ;
- },
- {
- notes: `
-# Markdown
-
-* Promises are working
-* This is notes and also a very long string to test the word wrapping. Test test test test.
-* Does it overlap?
- `,
- }
- )
- .add('nothing', () =>