Skip to content

Commit ca065b5

Browse files
dannyhwdannyhw
authored
fix: use themed colors in actions panel for dark mode support (#858)
* fix: use themed colors in actions panel for dark mode support Replace hardcoded light-mode colors in ActionLogger with styled components from @storybook/react-native-theming so the actions panel is readable in both light and dark mode. * changeset
1 parent 32b4cee commit ca065b5

File tree

5 files changed

+70
-52
lines changed

5 files changed

+70
-52
lines changed

‎.changeset/tender-buttons-judge.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@storybook/addon-ondevice-actions': patch
3+
---
4+
5+
fix actions logs not themed

‎packages/ondevice-actions/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"check:types": "tsc --noEmit"
2929
},
3030
"dependencies": {
31+
"@storybook/react-native-theming": "^10.3.0-next.2",
3132
"fast-deep-equal": "^3.1.3"
3233
},
3334
"devDependencies": {

‎packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx‎

Lines changed: 54 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
11
import React, { useState } from 'react';
2-
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
3-
4-
const theme = {
5-
OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
6-
OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
7-
OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
8-
OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
9-
OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
10-
OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
11-
OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
12-
OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
13-
OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
14-
15-
ARROW_COLOR: '#859499',
16-
};
2+
import { View, StyleSheet, TouchableOpacity } from 'react-native';
3+
import { styled } from '@storybook/react-native-theming';
4+
5+
const DefaultText = styled.Text(({ theme }) => ({
6+
color: theme.color.defaultText,
7+
}));
8+
9+
const ObjectNameText = styled.Text(({ theme }) => ({
10+
color: theme.color.secondary,
11+
}));
12+
13+
const MutedText = styled.Text(({ theme }) => ({
14+
color: theme.textMutedColor,
15+
}));
16+
17+
const StringText = styled.Text(({ theme }) => ({
18+
color: theme.color.orange,
19+
}));
20+
21+
const NumberText = styled.Text(({ theme }) => ({
22+
color: theme.color.green,
23+
}));
24+
25+
const BooleanText = styled.Text(({ theme }) => ({
26+
color: theme.color.seafoam,
27+
}));
28+
29+
const FunctionText = styled.Text(({ theme }) => ({
30+
color: theme.color.purple,
31+
}));
32+
33+
const ArrowText = styled.Text<{ visible: boolean }>(({ theme, visible }) => ({
34+
color: visible ? theme.textMutedColor : 'transparent',
35+
paddingRight: 8,
36+
}));
1737

1838
interface InspectProps {
1939
name?: string;
@@ -32,15 +52,9 @@ const Inspect = ({ name, value }: InspectProps) => {
3252
}
3353
}, [canExpand]);
3454

35-
const toggle = (
36-
<Text style={{ color: canExpand ? theme.ARROW_COLOR : 'transparent', paddingRight: 8 }}>
37-
{expanded ? '▼' : '▶'}
38-
</Text>
39-
);
55+
const toggle = <ArrowText visible={!!canExpand}>{expanded ? '▼' : '▶'}</ArrowText>;
4056

41-
const nameComponent = name ? (
42-
<Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
43-
) : null;
57+
const nameComponent = name ? <ObjectNameText>{name}</ObjectNameText> : null;
4458

4559
if (Array.isArray(value)) {
4660
if (name) {
@@ -49,7 +63,7 @@ const Inspect = ({ name, value }: InspectProps) => {
4963
<TouchableOpacity onPress={toggleExpanded} style={styles.row}>
5064
{toggle}
5165
{nameComponent}
52-
<Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
66+
<DefaultText>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</DefaultText>
5367
</TouchableOpacity>
5468
{expanded ? (
5569
<View style={styles.expanded}>
@@ -59,7 +73,7 @@ const Inspect = ({ name, value }: InspectProps) => {
5973
</View>
6074
))}
6175
<View style={styles.spacingLeft}>
62-
<Text>]</Text>
76+
<DefaultText>]</DefaultText>
6377
</View>
6478
</View>
6579
) : null}
@@ -68,13 +82,13 @@ const Inspect = ({ name, value }: InspectProps) => {
6882
}
6983
return (
7084
<>
71-
<Text>[</Text>
85+
<DefaultText>[</DefaultText>
7286
{value.map((v, i) => (
7387
<View key={i} style={styles.spacingLeft}>
7488
<Inspect value={v} />
7589
</View>
7690
))}
77-
<Text>]</Text>
91+
<DefaultText>]</DefaultText>
7892
</>
7993
);
8094
}
@@ -85,7 +99,7 @@ const Inspect = ({ name, value }: InspectProps) => {
8599
<TouchableOpacity style={styles.row} onPress={toggleExpanded}>
86100
{toggle}
87101
{nameComponent}
88-
<Text>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</Text>
102+
<DefaultText>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</DefaultText>
89103
</TouchableOpacity>
90104
{expanded ? (
91105
<View style={styles.expanded}>
@@ -95,7 +109,7 @@ const Inspect = ({ name, value }: InspectProps) => {
95109
</View>
96110
))}
97111
<View style={styles.spacingLeft}>
98-
<Text>{'}'}</Text>
112+
<DefaultText>{'}'}</DefaultText>
99113
</View>
100114
</View>
101115
) : null}
@@ -104,13 +118,13 @@ const Inspect = ({ name, value }: InspectProps) => {
104118
}
105119
return (
106120
<>
107-
<Text>{'{'}</Text>
121+
<DefaultText>{'{'}</DefaultText>
108122
{Object.entries(value).map(([key, v]) => (
109123
<View key={key}>
110124
<Inspect name={key} value={v} />
111125
</View>
112126
))}
113-
<Text>{'}'}</Text>
127+
<DefaultText>{'}'}</DefaultText>
114128
</>
115129
);
116130
}
@@ -119,7 +133,7 @@ const Inspect = ({ name, value }: InspectProps) => {
119133
<View style={styles.row}>
120134
{toggle}
121135
{nameComponent}
122-
<Text>: </Text>
136+
<DefaultText>: </DefaultText>
123137
<Value value={value} />
124138
</View>
125139
);
@@ -129,35 +143,25 @@ const Inspect = ({ name, value }: InspectProps) => {
129143

130144
function Value({ value }: { value: any }) {
131145
if (value === null) {
132-
return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
146+
return <MutedText>null</MutedText>;
133147
}
134148
if (value === undefined) {
135-
return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
149+
return <MutedText>undefined</MutedText>;
136150
}
137151
if (value instanceof RegExp) {
138-
return (
139-
<Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
140-
{`/${value.source}/${value.flags}`}
141-
</Text>
142-
);
152+
return <StringText>{`/${value.source}/${value.flags}`}</StringText>;
143153
}
144154
switch (typeof value) {
145155
case 'string':
146-
return (
147-
<Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
148-
);
156+
return <StringText>{JSON.stringify(value)}</StringText>;
149157
case 'number':
150-
return (
151-
<Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
152-
);
158+
return <NumberText>{JSON.stringify(value)}</NumberText>;
153159
case 'boolean':
154-
return (
155-
<Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
156-
);
160+
return <BooleanText>{JSON.stringify(value)}</BooleanText>;
157161
case 'function':
158-
return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
162+
return <FunctionText>[Function]</FunctionText>;
159163
default:
160-
return <Text>{JSON.stringify(value)}</Text>;
164+
return <DefaultText>{JSON.stringify(value)}</DefaultText>;
161165
}
162166
}
163167

‎packages/ondevice-actions/src/components/ActionLogger/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { ActionDisplay } from 'storybook/actions';
2-
import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
2+
import { Button, ScrollView, StyleSheet, View } from 'react-native';
3+
import { styled } from '@storybook/react-native-theming';
34
import Inspect from './Inspect';
45

6+
const CountText = styled.Text(({ theme }) => ({
7+
color: theme.color.defaultText,
8+
}));
9+
510
interface ActionLoggerProps {
611
actions: ActionDisplay[];
712
onClear: () => void;
@@ -13,7 +18,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
1318
<View>
1419
{actions.map((action: ActionDisplay) => (
1520
<View key={action.id} style={styles.row}>
16-
<View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
21+
<View>{action.count > 1 ? <CountText>{action.count}</CountText> : null}</View>
1722
<View style={styles.grow}>
1823
<Inspect name={action.data.name} value={action.data.args || action.data} />
1924
</View>

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)