fix: slider crash (#578)

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