feat: controls compatibility (#680)

* feat: controls compatibility

* more types

* fix: range type

* fix: web select multiple

* fix remove comment

* fix: web fast refresh

* fix: remove useless test

Author: dannyhw

examples/expo-example/App.test.tsx

@@ -1,3 +1,5 @@
+// fixes fast refresh on web
+import '@expo/metro-runtime';
 import { Text, View } from 'react-native';
 
 function App() {

examples/expo-example/App.tsx

@@ -0,0 +1,72 @@
+import { Text, ScrollView, Appearance } from 'react-native';
+
+const ComponentExample = (props: any) => {
+  return (
+    <ScrollView>
+      <Text style={{ color: Appearance.getColorScheme() === 'dark' ? 'white' : 'black' }}>
+        {JSON.stringify(props, null, 2)}
+      </Text>
+    </ScrollView>
+  );
+};
+
+export default {
+  component: ComponentExample,
+  argTypes: {
+    boolean: { control: 'boolean' },
+    color: { control: 'color' },
+    colorWithPresets: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
+      },
+    },
+    colorStartOpen: { control: { type: 'color', startOpen: true } },
+    date: { control: 'date' },
+    file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
+    number: { control: 'number' },
+    object: { control: 'object' },
+    radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
+    radioWithLabels: {
+      control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
+    },
+    inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
+    select: { control: 'select', options: ['a', 'b', 'c', 'double  space'] },
+    multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double  space'] },
+    range: { control: 'range' },
+    rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
+    text: { control: 'text' },
+  },
+};
+
+export const Undefined = {
+  args: {},
+};
+
+const DEFAULT_NESTED_OBJECT = {
+  text: 'Hello world',
+  boolean: true,
+  array: ['One', 'Two', 'Three'],
+  object: { a: 1, b: 2, c: 3 },
+};
+
+export const Defined = {
+  args: {
+    boolean: true,
+    color: '#ff0',
+    colorWithPresets: 'pink',
+    colorStartOpen: 'orange',
+    date: new Date(2010, 1, 1),
+    file: ['https://storybook.js.org/images/placeholders/350x150.png'],
+    number: 10,
+    object: DEFAULT_NESTED_OBJECT,
+    radio: 'a',
+    radioWithLabels: 'b',
+    inlineRadio: 'c',
+    select: 'b',
+    multiSelect: ['a'],
+    range: 15,
+    rangeCustom: 10,
+    text: 'hello',
+  },
+};

examples/expo-example/components/ControlExamples/WebCompatibility/WebCompatibility.stories.tsx

@@ -37,7 +37,6 @@
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",
-    "react-native-modal-selector": "^2.1.1",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {

packages/ondevice-controls/package.json

@@ -2,18 +2,7 @@ import React, { ComponentType } from 'react';
 import { styled } from '@storybook/react-native-theming';
 import TypeMap from './types';
 import { ArgType } from './ControlsPanel';
-
-type ControlTypes =
-  | 'text'
-  | 'number'
-  | 'color'
-  | 'boolean'
-  | 'object'
-  | 'select'
-  | 'array'
-  | 'date'
-  | 'button'
-  | 'radio';
+import { ControlTypes } from './sharedTypes';
 
 export interface Knob {
   name: string;

packages/ondevice-controls/src/PropField.tsx

@@ -11,7 +11,7 @@ const RadioContainer = styled.View(({ isInline }: any) => ({
   flexDirection: isInline ? 'row' : 'column',
   alignItems: isInline ? 'center' : 'flex-start',
   flexWrap: 'wrap',
-  rowGap: 10,
+  gap: 10,
 }));
 
 const RadioTouchable = styled.TouchableOpacity(() => ({
@@ -20,21 +20,20 @@ const RadioTouchable = styled.TouchableOpacity(() => ({
 }));
 
 const RadioCircle = styled.View(({ theme }) => ({
-  width: 15,
-  height: 15,
+  width: 16,
+  height: 16,
   borderWidth: 1,
   borderColor: theme.appBorderColor,
-  borderRadius: 15,
+  borderRadius: '100%',
   backgroundColor: theme.background.content,
   alignItems: 'center',
   justifyContent: 'center',
-  padding: 2,
 }));
 
 const RadioInnerCircle = styled.View(({ theme, selected }: any) => ({
-  height: '100%',
-  width: '100%',
-  borderRadius: 10,
+  width: 8,
+  height: 8,
+  borderRadius: '100%',
   backgroundColor: selected ? theme.color.positive : 'transparent',
 }));