Feat/v8 UI (#564)

Author: dannyhw

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/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,10 +17,10 @@ const main: StorybookConfig = {
     // '../components/**/*.storiesof.?(ts|tsx|js|jsx)',
   ],
   addons: [
-    '@storybook/addon-ondevice-notes',
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-backgrounds',
     '@storybook/addon-ondevice-actions',
+    '@storybook/addon-ondevice-notes',
   ],
 };
 

examples/expo-example/.storybook/storybook.requires.ts

@@ -1,15 +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-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
+import "@storybook/addon-ondevice-notes/register";
 
 const normalizedStories = [
   {
@@ -25,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",
@@ -62,15 +71,7 @@ if (!global.view) {
     storyEntries: normalizedStories,
   });
 } else {
-  const { importMap } = prepareStories({ storyEntries: normalizedStories });
-
-  global.view._preview.onStoriesChanged({
-    importFn: async (importPath: string) => importMap[importPath],
-  });
-
-  global.view._preview.onGetProjectAnnotationsChanged({
-    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
-  });
+  updateView(global.view, annotations, normalizedStories);
 }
 
 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/metro.config.js

@@ -1,44 +1,19 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
-const { mergeConfig } = require('metro-config');
 const path = require('path');
 const defaultConfig = getDefaultConfig(__dirname);
 
-// const { writeRequires } = require('@storybook/react-native/scripts/loader');
 const { generate } = require('@storybook/react-native/scripts/generate');
 
 generate({
   configPath: path.resolve(__dirname, './.storybook'),
 });
 
-// writeRequires({
-//   configPath: path.resolve(__dirname, './.storybook'),
-//   unstable_useRequireContext: false,
-// });
+defaultConfig.transformer.unstable_allowRequireContext = true;
 
-module.exports = (async () => {
-  return mergeConfig(defaultConfig, {
-    resolver: {
-      // unstable_enablePackageExports: true,
-      disableHierarchicalLookup: true,
-      unstable_enableSymlinks: true,
-      resolveRequest: (context, moduleName, platform) => {
-        const defaultResolveResult = context.resolveRequest(context, moduleName, platform);
+defaultConfig.watchFolders.push('../../packages/react-native-ui');
 
-        if (
-          process.env.STORYBOOK_ENABLED !== 'true' &&
-          defaultResolveResult?.filePath?.includes?.('.storybook/')
-        ) {
-          return {
-            type: 'empty',
-          };
-        }
+// causing breakage :(
+// defaultConfig.resolver.disableHierarchicalLookup = true;
 
-        return defaultResolveResult;
-      },
-    },
-    transformer: {
-      unstable_allowRequireContext: true,
-    },
-  });
-})();
+module.exports = defaultConfig;

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -19,36 +19,41 @@
     "test:ci": "jest --runInBand"
   },
   "dependencies": {
-    "@expo/metro-runtime": "^3.1.1",
+    "@expo/metro-runtime": "~3.1.3",
+    "@gorhom/bottom-sheet": "^4",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "4.4.2",
-    "@storybook/addon-essentials": "8.0.0-rc.3",
-    "@storybook/addon-interactions": "8.0.0-rc.3",
-    "@storybook/addon-links": "8.0.0-rc.3",
-    "@storybook/addon-ondevice-actions": "^8.0.0-alpha.2",
-    "@storybook/addon-ondevice-backgrounds": "^8.0.0-alpha.2",
-    "@storybook/addon-ondevice-controls": "^8.0.0-alpha.2",
-    "@storybook/addon-ondevice-notes": "^8.0.0-alpha.2",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/addon-interactions": "^8",
+    "@storybook/addon-links": "^8",
+    "@storybook/addon-ondevice-actions": "^8.0.0-alpha.4",
+    "@storybook/addon-ondevice-backgrounds": "^8.0.0-alpha.4",
+    "@storybook/addon-ondevice-controls": "^8.0.0-alpha.4",
+    "@storybook/addon-ondevice-notes": "^8.0.0-alpha.4",
     "@storybook/addon-react-native-server": "0.0.5",
     "@storybook/addon-react-native-web": "^0.0.22",
-    "@storybook/blocks": "8.0.0-rc.3",
-    "@storybook/builder-webpack5": "8.0.0-rc.3",
-    "@storybook/core-common": "8.0.0-rc.3",
-    "@storybook/docs-tools": "8.0.0-rc.3",
+    "@storybook/blocks": "^8",
+    "@storybook/builder-webpack5": "^8",
+    "@storybook/core-common": "^8",
+    "@storybook/docs-tools": "^8",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "8.0.0-rc.3",
-    "@storybook/react-native": "^8.0.0-alpha.2",
-    "@storybook/react-webpack5": "8.0.0-rc.3",
-    "@storybook/test": "8.0.0-rc.3",
-    "expo": "^50.0.2",
+    "@storybook/react": "^8",
+    "@storybook/react-native": "^8.0.0-alpha.4",
+    "@storybook/react-native-theming": "^8.0.0-alpha.4",
+    "@storybook/react-webpack5": "^8",
+    "@storybook/test": "^8",
+    "expo": "~50.0.14",
     "querystring": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.2",
+    "react-native": "0.73.6",
+    "react-native-gesture-handler": "~2.14.1",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
+    "react-native-svg": "14.1.0",
     "react-native-web": "~0.19.6",
-    "storybook": "8.0.0-rc.3",
+    "storybook": "^8",
     "ws": "^8.16.0"
   },
   "devDependencies": {
@@ -61,10 +66,9 @@
     "@types/ws": "^8.5.10",
     "babel-loader": "^9.1.3",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
-    "jest": "29.7.0",
-    "jest-expo": "50.0.1",
+    "jest": "^29.7.0",
+    "jest-expo": "~50.0.4",
     "metro-react-native-babel-preset": "^0.77.0",
-    "ts-node": "^10.9.1",
     "typescript": "^5.3.3"
   },
   "jest": {

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.0.0-alpha.2"
+  "version": "8.0.0-alpha.4"
 }

package.json

@@ -42,14 +42,13 @@
     "publish:next": "lerna publish from-git --dist-tag next",
     "test:ci": "lerna run test:ci",
     "test": "lerna run test",
-    "check-mismatched-deps": "ts-node ./check-matching-deps.ts"
+    "check-mismatched-deps": "npx tsx ./check-matching-deps.ts"
   },
   "devDependencies": {
     "@react-native/eslint-config": "^0.72.1",
     "cross-env": "^7.0.3",
     "eslint": "8.24.0",
     "lerna": "^8.1.2",
-    "ts-node": "^10.9.1",
     "typescript": "^5.3.3"
   },
   "resolutions": {

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -27,10 +27,10 @@
     "prepare": "tsc"
   },
   "dependencies": {
-    "@storybook/addon-actions": "8.0.0-rc.3",
-    "@storybook/core-events": "8.0.0-rc.3",
+    "@storybook/addon-actions": "^8",
+    "@storybook/core-events": "^8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "8.0.0-rc.3",
+    "@storybook/manager-api": "^8",
     "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,9 +32,9 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/manager-api": "8.0.0-rc.3",
-    "@storybook/preview-api": "8.0.0-rc.3",
-    "@storybook/react-native-theming": "^8.0.0-alpha.2"
+    "@storybook/manager-api": "^8",
+    "@storybook/preview-api": "^8",
+    "@storybook/react-native-theming": "^8.0.0-alpha.4"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,12 +30,12 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/addon-controls": "8.0.0-rc.3",
-    "@storybook/channels": "8.0.0-rc.3",
-    "@storybook/client-logger": "8.0.0-rc.3",
-    "@storybook/core-events": "8.0.0-rc.3",
-    "@storybook/manager-api": "8.0.0-rc.3",
-    "@storybook/react-native-theming": "^8.0.0-alpha.2",
+    "@storybook/addon-controls": "^8",
+    "@storybook/channels": "^8",
+    "@storybook/client-logger": "^8",
+    "@storybook/core-events": "^8",
+    "@storybook/manager-api": "^8",
+    "@storybook/react-native-theming": "^8.0.0-alpha.4",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",
@@ -47,6 +47,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=4",
     "@react-native-community/datetimepicker": "*",
     "@react-native-community/slider": "*",
     "react": "*",

packages/ondevice-controls/src/types/Array.tsx

@@ -3,8 +3,9 @@ import { styled } from '@storybook/react-native-theming';
 
 import { inputStyle } from './common';
 import { useResyncValue } from './useResyncValue';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   ...inputStyle(theme),
 }));
 

packages/ondevice-controls/src/types/Number.tsx

@@ -5,8 +5,9 @@ import { View } from 'react-native';
 
 import { inputStyle } from './common';
 import { useResyncValue } from './useResyncValue';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
-const Input = styled.TextInput<{ showError: boolean }>(({ theme, showError }) => {
+const Input = styled(BottomSheetTextInput)<{ showError: boolean }>(({ theme, showError }) => {
   const style = inputStyle(theme);
   return {
     ...style,

packages/ondevice-controls/src/types/Object.tsx

@@ -4,6 +4,7 @@ import { ViewStyle } from 'react-native';
 
 import { useResyncValue } from './useResyncValue';
 import { inputStyle } from './common';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
 
 export interface ObjectProps {
   arg: {
@@ -14,7 +15,7 @@ export interface ObjectProps {
   isPristine: boolean;
 }
 
-const Input = styled.TextInput(({ theme }) => ({
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
   ...inputStyle(theme, false),
   minHeight: 60,
 }));