feat: Improve styling in the addons panel (storybookjs#437)

* fix: Panels should not obey the story's safe area param

The panels are part of the Storybook UI, not the story content, they
should always take safe area into account so that their UI isn't
accidentally rendered in the margins of the device's screen.

* fix: KeyboardAvoidingView intrudes on the app content

KeyboardAvoidingView renders too much padding when the keyboard is
open, which ends up pushing the padding of the view up beyond the
keyboard. This is because the bottom inset (safe area inset + nav bar)
is not taken into account.

* refactor: Extend the theme considerably

This deprecates all of the previous theme values and re-organises the
theme in a way that the majority of the Storybook UI can be themed
this way.

* chore: Style each of the panel containers the same way

* refactor: Extract tab bar components into a more general file

This also renames the components something more intentional than `Button`.

* chore: Apply theme values to the addons panel

* refactor: Wrap emotion's `useTheme` hook

This makes it convenient to return the correct type for the theme.

* chore: Apply theme values to the story list panel

* chore: Apply theme values to the visibility button

* chore: Apply theme values to ondevice-controls addon

* chore: Apply theme values to ondevice-knobs addon

* chore: Apply theme values to ondevice-backgrounds addon

* chore: Apply theme values to ondevice-notes addon

* chore: Usability improvements for ondevice-actions

- Allow tapping anywhere on a collapsed section to expand it
- More compact representation for values

* chore: Deep merge a partial theme from Storybook parameters

This means users can override only the parts of the theme they're
interested in, from `getStorybookUI`.

* docs: Update MIGRATION to include theme migration advice

* fix: re-add auto args

* chore: Remove unused knobs/controls code

* fix(ondevice-backgrounds): Fix swatch styling on web

* fix(ondevice-controls): Fix control styling on web

* fix(ondevice-knobs,ondevice-controls): Fix radio styling on web

* chore: Remove commented theme properties

* fix: web horizontal scroll

---------

Co-authored-by: Jonathan Jacobs <[email protected]>
Co-authored-by: Daniel Williams <[email protected]>

Author: 3 people

MIGRATION.md

@@ -1,6 +1,8 @@
 # Migration
 
 - [Migration](#migration)
+  - [From version 5.3.x to 6.5.x](#from-version-53x-to-65x) 
+    - [Theming](#theming)
   - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
     - [To main.js configuration](#to-mainjs-configuration)
     - [Create React App preset](#create-react-app-preset)
@@ -76,6 +78,36 @@
     - [Packages renaming](#packages-renaming)
     - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 5.3.x to 6.5.x
+
+### Theming
+
+The theme structure in Storybook 6.5 provides much more granular control over
+more of the Storybook UI, including addons, this unfortunately makes it
+difficult to provide backwards compatibility. If you were previously using a
+custom theme you will now need to migrate it to the new theme.
+
+The themeable values are comprehensively listed in the `Theme` type in
+[theme.ts](https://github.com/storybookjs/react-native/blob/next-6.0/app/react-native/src/preview/components/Shared/theme.ts).
+
+Below the old theme keys are listed against a comparable key in the new theme,
+although bear in mind that there are many more aspects of the UI that can be
+themed now, this is just to help get you started:
+
+- `backgroundColor`: `backgroundColor`
+- `storyListBackgroundColor`: `panel.backgroundColor`
+- `listItemTextColor`: `storyList.storyTextColor`
+- `listItemActiveColor`: `storyList.storySelectedBackgroundColor`
+- `listItemActiveTextColor`: `storyList.storySelectedTextColor`
+- `headerTextColor`: `storyList.headerTextColor`
+- `labelColor`: `inputs.labelTextColor`
+- `borderColor`: `panel.borderColor`, `navigation.borderColor`, `inputs.text.borderColor`, `inputs.radio.borderColor`, `inputs.swatch.borderColor`
+- `previewBorderColor`: The preview no longer has a border and uses an elevation shadow instead
+- `buttonTextColor`: `tabs.inactiveTextColor`, `button.primary.textColor`, `button.secondary.textColor`
+- `buttonActiveTextColor`: `tabs.activeTextColor`
+- `secondaryLabelColor`: `inputs.slider.valueTextColor`
+
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration

addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx

@@ -1,9 +1,7 @@
 import React, { useState } from 'react';
-import { Button, View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 const theme = {
-  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
-  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
   OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
   OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
   OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
@@ -14,10 +12,7 @@ const theme = {
   OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
   OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
 
-  ARROW_COLOR: '#6e6e6e',
-  ARROW_MARGIN_RIGHT: 3,
-  ARROW_FONT_SIZE: 12,
-  ARROW_ANIMATION_DURATION: '0',
+  ARROW_COLOR: '#859499',
 };
 
 interface InspectProps {
@@ -27,20 +22,20 @@ interface InspectProps {
 
 const Inspect = ({ name, value }: InspectProps) => {
   const [expanded, setExpanded] = useState(false);
+  const canExpand =
+    name &&
+    ((Array.isArray(value) && value.length) ||
+      (value && typeof value === 'object' && Object.keys(value).length));
+  const toggleExpanded = React.useCallback(() => {
+    if (canExpand) {
+      setExpanded((currentValue) => !currentValue);
+    }
+  }, [canExpand]);
+
   const toggle = (
-    <View style={styles.container}>
-      {name &&
-      ((Array.isArray(value) && value.length) ||
-        (value &&
-          typeof value === 'object' &&
-          !Array.isArray(value) &&
-          Object.keys(value).length)) ? (
-        <Button
-          onPress={() => setExpanded((wasExpanded) => !wasExpanded)}
-          title={!expanded ? '▶' : '▼'}
-        />
-      ) : null}
-    </View>
+    <Text style={{ color: canExpand ? theme.ARROW_COLOR : 'transparent', paddingRight: 8 }}>
+      {expanded ? '▼' : '▶'}
+    </Text>
   );
 
   const nameComponent = name ? (
@@ -51,11 +46,11 @@ const Inspect = ({ name, value }: InspectProps) => {
     if (name) {
       return (
         <>
-          <View style={styles.row}>
+          <TouchableOpacity onPress={toggleExpanded} style={styles.row}>
             {toggle}
             {nameComponent}
             <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
-          </View>
+          </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
               {value.map((v, i) => (
@@ -72,26 +67,26 @@ const Inspect = ({ name, value }: InspectProps) => {
       );
     }
     return (
-      <View>
+      <>
         <Text>[</Text>
         {value.map((v, i) => (
           <View key={i} style={styles.spacingLeft}>
             <Inspect value={v} />
           </View>
         ))}
         <Text>]</Text>
-      </View>
+      </>
     );
   }
   if (value && typeof value === 'object' && !(value instanceof RegExp)) {
     if (name) {
       return (
         <>
-          <View style={styles.row}>
+          <TouchableOpacity style={styles.row} onPress={toggleExpanded}>
             {toggle}
             {nameComponent}
             <Text>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</Text>
-          </View>
+          </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
               {Object.entries(value).map(([key, v]) => (
@@ -108,15 +103,15 @@ const Inspect = ({ name, value }: InspectProps) => {
       );
     }
     return (
-      <View>
+      <>
         <Text>{'{'}</Text>
         {Object.entries(value).map(([key, v]) => (
           <View key={key}>
             <Inspect name={key} value={v} />
           </View>
         ))}
         <Text>{'}'}</Text>
-      </View>
+      </>
     );
   }
   if (name) {
@@ -129,11 +124,7 @@ const Inspect = ({ name, value }: InspectProps) => {
       </View>
     );
   }
-  return (
-    <View>
-      <Value value={value} />
-    </View>
-  );
+  return <Value value={value} />;
 };
 
 function Value({ value }: { value: any }) {
@@ -174,7 +165,6 @@ export default Inspect;
 
 const styles = StyleSheet.create({
   spacingLeft: { marginLeft: 20 },
-  expanded: { marginLeft: 40 },
-  row: { flexDirection: 'row', alignItems: 'center' },
-  container: { width: 40, height: 40 },
+  expanded: { marginLeft: 20 },
+  row: { paddingBottom: 8, flexDirection: 'row', alignItems: 'center' },
 });

addons/ondevice-backgrounds/src/Swatch.tsx

@@ -1,21 +1,54 @@
+// @ts-ignore
+import styled from '@emotion/native';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 interface SwatchProps {
   name: string;
   value: string;
   setBackground: (background: string) => void;
 }
 
+const PressableSwatch = styled.TouchableOpacity(({ theme }: any) => ({
+  marginBottom: theme.tokens.spacing3,
+  borderWidth: theme.inputs.swatch.borderWidth,
+  borderColor: theme.inputs.swatch.borderColor,
+  borderRadius: theme.inputs.swatch.outerBorderRadius,
+  backgroundColor: theme.inputs.swatch.backgroundColor,
+  paddingVertical: theme.inputs.swatch.paddingVertical,
+  paddingHorizontal: theme.inputs.swatch.paddingHorizontal,
+}));
+
+const ColorSwatch = styled.View(({ theme, color }: any) => ({
+  height: theme.inputs.swatch.height,
+  width: '100%',
+  borderRadius: theme.inputs.swatch.innerBorderRadius,
+  backgroundColor: color,
+}));
+
+const ValueContainer = styled.View(({ theme }: any) => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  padding: theme.tokens.spacing1,
+  paddingBottom: 0,
+}));
+const NameText = styled.Text(({ theme }: any) => ({
+  fontSize: theme.inputs.swatch.fontSize,
+  fontWeight: theme.inputs.swatch.nameTextWeight,
+}));
+const ValueText = styled.Text(({ theme }: any) => ({
+  fontSize: theme.inputs.swatch.fontSize,
+}));
+
 const Swatch = ({ name, value, setBackground }: SwatchProps) => (
-  <TouchableOpacity style={styles.container} onPress={() => setBackground(value)}>
-    <View style={[styles.color, { backgroundColor: value }]} />
-    <View style={styles.valueContainer}>
-      <Text>{name}:</Text>
-      <Text>{value}</Text>
-    </View>
-  </TouchableOpacity>
+  <PressableSwatch onPress={() => setBackground(value)}>
+    <ColorSwatch color={value} />
+    <ValueContainer>
+      <NameText>{name}</NameText>
+      <ValueText>{value}</ValueText>
+    </ValueContainer>
+  </PressableSwatch>
 );
 
 Swatch.propTypes = {
@@ -25,20 +58,3 @@ Swatch.propTypes = {
 };
 
 export default Swatch;
-
-const styles = StyleSheet.create({
-  valueContainer: {
-    padding: 4,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  color: { flex: 1, height: 40 },
-  container: {
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: 'rgba(0,0,0,0.2)',
-    marginTop: 10,
-    marginBottom: 20,
-    marginHorizontal: 10,
-  },
-});

addons/ondevice-controls/src/ControlsPanel.tsx

@@ -7,18 +7,21 @@ import { useArgs } from './hooks';
 import NoControlsWarning from './NoControlsWarning';
 import PropForm from './PropForm';
 
-const Touchable = styled.TouchableOpacity(({ theme }) => ({
-  borderRadius: 2,
-  borderWidth: 1,
-  borderColor: theme.borderColor || '#e6e6e6',
-  padding: 4,
-  margin: 10,
+const ButtonTouchable = styled.TouchableOpacity(({ theme }) => ({
+  backgroundColor: theme.button.secondary.backgroundColor,
+  borderRadius: theme.button.secondary.borderRadius,
+  borderWidth: theme.button.secondary.borderWidth,
+  borderColor: theme.button.secondary.borderColor,
+  paddingVertical: theme.button.paddingVertical,
+  paddingHorizontal: theme.button.paddingHorizontal,
   justifyContent: 'center',
   alignItems: 'center',
 }));
 
-const ResetButton = styled.Text(({ theme }) => ({
-  color: theme.buttonTextColor || '#999999',
+const ButtonText = styled.Text(({ theme }) => ({
+  color: theme.button.secondary.textColor,
+  fontSize: theme.button.fontSize,
+  fontWeight: theme.button.fontWeight,
 }));
 
 export declare type SortType = 'alpha' | 'requiredFirst' | 'none';
@@ -86,9 +89,9 @@ const ControlsPanel = ({ api }: { api: API }) => {
   return (
     <>
       <PropForm args={argsObject} isPristine={isPristine} onFieldChange={updateArgsOnFieldChange} />
-      <Touchable onPress={handleReset}>
-        <ResetButton>RESET</ResetButton>
-      </Touchable>
+      <ButtonTouchable onPress={handleReset}>
+        <ButtonText>RESET</ButtonText>
+      </ButtonTouchable>
     </>
   );
 };