feat/v8

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
+- [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

examples/expo-example/.storybook-web/main.ts

@@ -17,28 +17,24 @@ 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: {
  host: 'localhost',
  port: 7007,
  },
 
- docs: {
- autodocs: 'tag',
- },
+ // docs: {
+ //  autodocs: 'tag',
+ // },
 };
 
 export default main;

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,

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,

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;

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!',

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;
 }
 

examples/expo-example/components/NestingExample/ChatMessageBubble.stories.tsx

@@ -16,7 +16,7 @@ export const First: StoryObj<typeof MyComponent> = {
 };
 
 export const Second: StoryObj<typeof MyComponent> = {
- storyName: 'Second Story',
+ name: 'Second Story',
  args: {
  text: 'Second',
  },

examples/expo-example/components/NestingExample/ChatMessageBubbleAgain.stories.tsx

@@ -17,7 +17,7 @@ export const First: StoryObj<typeof MyComponent> = {
 };
 
 export const Second: StoryObj<typeof MyComponent> = {
- storyName: 'Second Story',
+ name: 'Second Story',
  args: {
  text: 'Second',
  },