fix: knobs slider crash

examples/expo-example/App.tsx

@@ -20,6 +20,7 @@ let AppEntryPoint = App;
 
 if (Constants.expoConfig?.extra?.storybookEnabled === 'true') {
   AppEntryPoint = require('./.storybook').default;
+  // AppEntryPoint = require('./.storybook/indexV6Mode').default;
 }
 
 export default AppEntryPoint;

examples/expo-example/package.json

@@ -21,51 +21,51 @@
     "test:ci": "jest --runInBand"
   },
   "dependencies": {
-    "@expo/metro-runtime": "^3.1.1",
-    "@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": "^7.6.13",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.6.13",
+    "@expo/metro-runtime": "~3.2.1",
+    "@react-native-async-storage/async-storage": "1.23.1",
+    "@react-native-community/datetimepicker": "8.0.1",
+    "@react-native-community/slider": "4.5.2",
+    "@storybook/addon-essentials": "^7.6.19",
+    "@storybook/addon-interactions": "^7.6.19",
+    "@storybook/addon-knobs": "^7.1.1",
+    "@storybook/addon-links": "^7.6.19",
     "@storybook/addon-ondevice-actions": "^7.6.19",
     "@storybook/addon-ondevice-backgrounds": "^7.6.19",
     "@storybook/addon-ondevice-controls": "^7.6.19",
     "@storybook/addon-ondevice-knobs": "^7.6.19",
     "@storybook/addon-ondevice-notes": "^7.6.19",
-    "@storybook/addon-react-native-server": "0.0.5--canary.3.18ef8d7.0",
+    "@storybook/addon-react-native-server": "^0.0.5",
     "@storybook/addon-react-native-web": "^0.0.22",
-    "@storybook/blocks": "^7.6.13",
-    "@storybook/builder-webpack5": "^7.6.13",
-    "@storybook/core-common": "^7.6.13",
-    "@storybook/docs-tools": "^7.6.13",
+    "@storybook/blocks": "^7.6.19",
+    "@storybook/builder-webpack5": "^7.6.19",
+    "@storybook/core-common": "^7.6.19",
+    "@storybook/docs-tools": "^7.6.19",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^7.6.13",
+    "@storybook/react": "^7.6.19",
     "@storybook/react-native": "^7.6.19",
-    "@storybook/react-webpack5": "^7.6.13",
-    "@storybook/test": "^7.6.13",
-    "expo": "^50.0.2",
+    "@storybook/react-webpack5": "^7.6.19",
+    "@storybook/test": "^7.6.19",
+    "expo": "^51.0.13",
     "querystring": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.73.2",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-web": "~0.19.6",
-    "storybook": "^7.6.13",
+    "react-native": "0.74.2",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-web": "~0.19.10",
+    "storybook": "^7.6.19",
     "ws": "^8.16.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@react-native/babel-preset": "^0.74.0",
     "@testing-library/react-native": "12.4.3",
-    "@types/react": "~18.2.14",
+    "@types/react": "~18.2.79",
     "@types/react-test-renderer": "18.0.7",
     "@types/ws": "^8.5.10",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "jest": "29.7.0",
-    "jest-expo": "50.0.1",
+    "jest-expo": "~51.0.1",
     "metro-react-native-babel-preset": "^0.77.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.3"

packages/ondevice-actions/package.json

@@ -27,10 +27,10 @@
     "prepare": "tsc"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^7.6.13",
-    "@storybook/core-events": "^7.6.13",
+    "@storybook/addon-actions": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^7.6.13",
+    "@storybook/manager-api": "^7.6.19",
     "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {

packages/ondevice-backgrounds/package.json

@@ -32,8 +32,8 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/manager-api": "^7.6.13",
-    "@storybook/preview-api": "^7.6.13",
+    "@storybook/manager-api": "^7.6.19",
+    "@storybook/preview-api": "^7.6.19",
     "@storybook/react-native-theming": "^7.6.19"
   },
   "devDependencies": {

packages/ondevice-controls/package.json

@@ -30,11 +30,11 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/addon-controls": "^7.6.13",
-    "@storybook/channels": "^7.6.13",
-    "@storybook/client-logger": "^7.6.13",
-    "@storybook/core-events": "^7.6.13",
-    "@storybook/manager-api": "^7.6.13",
+    "@storybook/addon-controls": "^7.6.19",
+    "@storybook/channels": "^7.6.19",
+    "@storybook/client-logger": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
+    "@storybook/manager-api": "^7.6.19",
     "@storybook/react-native-theming": "^7.6.19",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",

packages/ondevice-knobs/package.json

@@ -30,10 +30,10 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addons": "^7.6.13",
-    "@storybook/core-events": "^7.6.13",
-    "@storybook/manager-api": "^7.6.13",
+    "@storybook/addon-knobs": "^7.1.1",
+    "@storybook/addons": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
+    "@storybook/manager-api": "^7.6.19",
     "@storybook/react-native-theming": "^7.6.19",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",

packages/ondevice-knobs/src/components/color-picker/HoloColorPicker.js

@@ -1,18 +1,20 @@
+// credit to https://github.com/instea/react-native-color-picker
 /* eslint-disable react/require-default-props */
 /* eslint-disable global-require */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable no-underscore-dangle */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
+  Text,
   TouchableOpacity,
-  Slider,
   View,
   Image,
   StyleSheet,
   InteractionManager,
   I18nManager,
 } from 'react-native';
+import Slider from '@react-native-community/slider';
 import tinycolor from 'tinycolor2';
 import { createPanResponder } from './utils';
 
@@ -110,14 +112,18 @@ export class HoloColorPicker extends React.PureComponent {
   _onColorSelected() {
     const { onColorSelected } = this.props;
     const color = tinycolor(this._getColor()).toHexString();
-    if (onColorSelected) onColorSelected(color);
+    if (onColorSelected) {
+      onColorSelected(color);
+    }
   }
 
   _onOldColorSelected() {
     const { oldColor, onOldColorSelected } = this.props;
     const color = tinycolor(oldColor);
     this.setState({ color: color.toHsv() });
-    if (onOldColorSelected) onOldColorSelected(color.toHexString());
+    if (onOldColorSelected) {
+      onOldColorSelected(color.toHexString());
+    }
   }
 
   _computeHValue(x, y) {
@@ -134,21 +140,6 @@ export class HoloColorPicker extends React.PureComponent {
     return rad - Math.PI - Math.PI / 2;
   }
 
-  _getSlider() {
-    if (this.props.hideSliders) {
-      return undefined;
-    }
-    if (this.props.sliderComponent) {
-      return this.props.sliderComponent;
-    }
-    if (!Slider) {
-      throw new Error(
-        'You need to install `@react-native-community/slider` and pass it (or any other Slider compatible component) as `sliderComponent` prop'
-      );
-    }
-    return Slider;
-  }
-
   render() {
     const { pickerSize } = this.state;
     const { oldColor, style } = this.props;
@@ -165,7 +156,6 @@ export class HoloColorPicker extends React.PureComponent {
       angle,
       isRTL: this._isRTL,
     });
-    const SliderComp = this._getSlider();
     return (
       <View style={style}>
         <View onLayout={this._onLayout} ref={this.pickerContainer} style={styles.pickerContainer}>
@@ -209,8 +199,10 @@ export class HoloColorPicker extends React.PureComponent {
         </View>
         {this.props.hideSliders ? null : (
           <View>
-            <SliderComp value={s} onValueChange={this._onSValueChange} />
-            <SliderComp value={v} onValueChange={this._onVValueChange} />
+            <Text style={{ paddingStart: 4, color: '#859499', fontSize: 12 }}>Saturation</Text>
+            <Slider value={s} onValueChange={this._onSValueChange} />
+            <Text style={{ paddingStart: 4, color: '#859499', fontSize: 12 }}>Lightness</Text>
+            <Slider value={v} onValueChange={this._onVValueChange} />
           </View>
         )}
       </View>
@@ -221,16 +213,18 @@ export class HoloColorPicker extends React.PureComponent {
 HoloColorPicker.propTypes = {
   color: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.shape({ h: PropTypes.number, s: PropTypes.number, v: PropTypes.number }),
+    PropTypes.shape({
+      h: PropTypes.number,
+      s: PropTypes.number,
+      v: PropTypes.number,
+    }),
   ]),
   defaultColor: PropTypes.string,
   oldColor: PropTypes.string,
   onColorChange: PropTypes.func,
   onColorSelected: PropTypes.func,
   onOldColorSelected: PropTypes.func,
   hideSliders: PropTypes.bool,
-  sliderComponent: PropTypes.elementType,
-  // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.any,
 };
 

packages/ondevice-knobs/src/types/Color.js

@@ -103,6 +103,7 @@ ColorType.propTypes = {
   }),
   onChange: PropTypes.func,
 };
+
 ColorType.defaultProps = {
   knob: {},
   onChange: (value) => value,

packages/ondevice-notes/package.json

@@ -29,9 +29,9 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/client-logger": "^7.6.13",
-    "@storybook/core-events": "^7.6.13",
-    "@storybook/manager-api": "^7.6.13",
+    "@storybook/client-logger": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
+    "@storybook/manager-api": "^7.6.19",
     "@storybook/react-native-theming": "^7.6.19",
     "react-native-markdown-display": "6.1.6"
   },

packages/react-native/package.json

@@ -55,18 +55,18 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channels": "^7.6.13",
-    "@storybook/client-logger": "^7.6.13",
-    "@storybook/core-client": "^7.6.13",
-    "@storybook/core-common": "^7.6.13",
-    "@storybook/core-events": "^7.6.13",
+    "@storybook/channels": "^7.6.19",
+    "@storybook/client-logger": "^7.6.19",
+    "@storybook/core-client": "^7.6.19",
+    "@storybook/core-common": "^7.6.19",
+    "@storybook/core-events": "^7.6.19",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "^7.6.13",
+    "@storybook/docs-tools": "^7.6.19",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^7.6.13",
-    "@storybook/preview-api": "^7.6.13",
-    "@storybook/preview-web": "^7.6.13",
-    "@storybook/react": "^7.6.13",
+    "@storybook/manager-api": "^7.6.19",
+    "@storybook/preview-api": "^7.6.19",
+    "@storybook/preview-web": "^7.6.19",
+    "@storybook/react": "^7.6.19",
     "@storybook/react-native-theming": "^7.6.19",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
@@ -79,11 +79,11 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "^7.6.13",
+    "@storybook/types": "^7.6.19",
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.14",
+    "@types/react": "~18.2.79",
     "babel-jest": "^29.4.3",
-    "jest": "^29.7.0",
+    "jest": "29.7.0",
     "jotai": "^2.6.2",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",

packages/react-native/src/StartV6.tsx

@@ -56,7 +56,6 @@ export function start() {
     selectionSpecifier: null,
     setQueryParams: () => {},
     setSelection: (selection) => {
-      console.log('setSelection');
       preview.selectionStore.selection = selection;
     },
   };