Add a stories toggle to Preferences

This commit is contained in:
Josh Perez 2022-07-19 20:47:05 -04:00 committed by GitHub
parent 4d67c6b056
commit 0d2e6493f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 199 additions and 110 deletions

View file

@ -1,16 +1,17 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, Story } from '@storybook/react';
import React from 'react';
import { action } from '@storybook/addon-actions';
import enMessages from '../../_locales/en/messages.json';
import type { PropsType } from './Preferences';
import type { PropsDataType, PropsType } from './Preferences';
import { Preferences } from './Preferences';
import { setupI18n } from '../util/setupI18n';
import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors';
import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
import { objectMap } from '../util/objectMap';
const i18n = setupI18n('en', enMessages);
@ -42,7 +43,7 @@ const availableSpeakers = [
},
];
const createProps = (): PropsType => ({
const getDefaultArgs = (): PropsDataType => ({
availableCameras: [
{
deviceId:
@ -73,6 +74,7 @@ const createProps = (): PropsType => ({
hasCallNotifications: true,
hasCallRingtoneNotification: false,
hasCountMutedConversations: false,
hasCustomTitleBar: true,
hasHideMenuBar: false,
hasIncomingCallNotifications: true,
hasLinkPreviews: true,
@ -85,38 +87,9 @@ const createProps = (): PropsType => ({
hasReadReceipts: true,
hasRelayCalls: false,
hasSpellCheck: true,
hasStoriesEnabled: true,
hasTypingIndicators: true,
lastSyncTime: Date.now(),
notificationContent: 'name',
selectedCamera:
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
selectedMicrophone: availableMicrophones[0],
selectedSpeaker: availableSpeakers[1],
themeSetting: 'system',
universalExpireTimer: 3600,
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
zoomFactor: 1,
addCustomColor: action('addCustomColor'),
closeSettings: action('closeSettings'),
doDeleteAllData: action('doDeleteAllData'),
doneRendering: action('doneRendering'),
editCustomColor: action('editCustomColor'),
getConversationsWithCustomColor: () => Promise.resolve([]),
initialSpellCheckSetting: true,
makeSyncRequest: () => {
action('makeSyncRequest');
return Promise.resolve();
},
removeCustomColor: action('removeCustomColor'),
removeCustomColorOnConversations: action('removeCustomColorOnConversations'),
resetAllChatColors: action('resetAllChatColors'),
resetDefaultChatColor: action('resetDefaultChatColor'),
setGlobalDefaultConversationColor: action(
'setGlobalDefaultConversationColor'
),
isAudioNotificationsSupported: true,
isAutoDownloadUpdatesSupported: true,
isAutoLaunchSupported: true,
@ -125,62 +98,95 @@ const createProps = (): PropsType => ({
isPhoneNumberSharingSupported: false,
isSyncSupported: true,
isSystemTraySupported: true,
lastSyncTime: Date.now(),
notificationContent: 'name',
selectedCamera:
'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
selectedMicrophone: availableMicrophones[0],
selectedSpeaker: availableSpeakers[1],
shouldShowStoriesSettings: true,
themeSetting: 'system',
universalExpireTimer: 3600,
whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
whoCanSeeMe: PhoneNumberSharingMode.Everybody,
zoomFactor: 1,
});
onAudioNotificationsChange: action('onAudioNotificationsChange'),
onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'),
onAutoLaunchChange: action('onAutoLaunchChange'),
onCallNotificationsChange: action('onCallNotificationsChange'),
onCallRingtoneNotificationChange: action('onCallRingtoneNotificationChange'),
onCountMutedConversationsChange: action('onCountMutedConversationsChange'),
onHideMenuBarChange: action('onHideMenuBarChange'),
onIncomingCallNotificationsChange: action(
'onIncomingCallNotificationsChange'
),
onLastSyncTimeChange: action('onLastSyncTimeChange'),
onMediaCameraPermissionsChange: action('onMediaCameraPermissionsChange'),
onMediaPermissionsChange: action('onMediaPermissionsChange'),
onMinimizeToAndStartInSystemTrayChange: action(
'onMinimizeToAndStartInSystemTrayChange'
),
onMinimizeToSystemTrayChange: action('onMinimizeToSystemTrayChange'),
onNotificationAttentionChange: action('onNotificationAttentionChange'),
onNotificationContentChange: action('onNotificationContentChange'),
onNotificationsChange: action('onNotificationsChange'),
onRelayCallsChange: action('onRelayCallsChange'),
onSelectedCameraChange: action('onSelectedCameraChange'),
onSelectedMicrophoneChange: action('onSelectedMicrophoneChange'),
onSelectedSpeakerChange: action('onSelectedSpeakerChange'),
onSpellCheckChange: action('onSpellCheckChange'),
onThemeChange: action('onThemeChange'),
onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),
onZoomFactorChange: action('onZoomFactorChange'),
i18n,
executeMenuRole: action('executeMenuRole'),
hasCustomTitleBar: true,
const defaultArgTypes: Record<string, { defaultValue: unknown }> = {};
objectMap(getDefaultArgs(), (key, defaultValue) => {
defaultArgTypes[key] = { defaultValue };
});
export default {
title: 'Components/Preferences',
component: Preferences,
argTypes: {
// ...defaultArgTypes,
i18n: {
defaultValue: i18n,
},
addCustomColor: { action: true },
closeSettings: { action: true },
doDeleteAllData: { action: true },
doneRendering: { action: true },
editCustomColor: { action: true },
executeMenuRole: { action: true },
getConversationsWithCustomColor: { action: true },
makeSyncRequest: { action: true },
onAudioNotificationsChange: { action: true },
onAutoDownloadUpdateChange: { action: true },
onAutoLaunchChange: { action: true },
onCallNotificationsChange: { action: true },
onCallRingtoneNotificationChange: { action: true },
onCountMutedConversationsChange: { action: true },
onHasStoriesEnabledChanged: { action: true },
onHideMenuBarChange: { action: true },
onIncomingCallNotificationsChange: { action: true },
onLastSyncTimeChange: { action: true },
onMediaCameraPermissionsChange: { action: true },
onMediaPermissionsChange: { action: true },
onMinimizeToAndStartInSystemTrayChange: { action: true },
onMinimizeToSystemTrayChange: { action: true },
onNotificationAttentionChange: { action: true },
onNotificationContentChange: { action: true },
onNotificationsChange: { action: true },
onRelayCallsChange: { action: true },
onSelectedCameraChange: { action: true },
onSelectedMicrophoneChange: { action: true },
onSelectedSpeakerChange: { action: true },
onSpellCheckChange: { action: true },
onThemeChange: { action: true },
onUniversalExpireTimerChange: { action: true },
onZoomFactorChange: { action: true },
removeCustomColor: { action: true },
removeCustomColorOnConversations: { action: true },
resetAllChatColors: { action: true },
resetDefaultChatColor: { action: true },
setGlobalDefaultConversationColor: { action: true },
},
} as Meta;
const Template: Story<PropsType> = args => <Preferences {...args} />;
export const _Preferences = Template.bind({});
_Preferences.args = getDefaultArgs();
export const Blocked1 = Template.bind({});
Blocked1.args = {
blockedCount: 1,
};
export const _Preferences = (): JSX.Element => (
<Preferences {...createProps()} />
);
export const Blocked1 = (): JSX.Element => (
<Preferences {...createProps()} blockedCount={1} />
);
export const BlockedMany = (): JSX.Element => (
<Preferences {...createProps()} blockedCount={55} />
);
export const CustomUniversalExpireTimer = (): JSX.Element => (
<Preferences {...createProps()} universalExpireTimer={9000} />
);
export const BlockedMany = Template.bind({});
BlockedMany.args = {
blockedCount: 55,
};
export const CustomUniversalExpireTimer = Template.bind({});
CustomUniversalExpireTimer.args = {
universalExpireTimer: 9000,
};
CustomUniversalExpireTimer.story = {
name: 'Custom universalExpireTimer',
};

View file

@ -44,7 +44,7 @@ import { useTheme } from '../hooks/useTheme';
type CheckboxChangeHandlerType = (value: boolean) => unknown;
type SelectChangeHandlerType<T = string | number> = (value: T) => unknown;
export type PropsType = {
export type PropsDataType = {
// Settings
blockedCount: number;
customColors: Record<string, CustomColorType>;
@ -68,6 +68,7 @@ export type PropsType = {
hasReadReceipts: boolean;
hasRelayCalls?: boolean;
hasSpellCheck: boolean;
hasStoriesEnabled: boolean;
hasTypingIndicators: boolean;
lastSyncTime?: number;
notificationContent: NotificationSettingType;
@ -80,16 +81,37 @@ export type PropsType = {
whoCanSeeMe: PhoneNumberSharingMode;
zoomFactor: ZoomFactorType;
// Other props
hasCustomTitleBar: boolean;
initialSpellCheckSetting: boolean;
shouldShowStoriesSettings: boolean;
// Limited support features
isAudioNotificationsSupported: boolean;
isAutoDownloadUpdatesSupported: boolean;
isAutoLaunchSupported: boolean;
isHideMenuBarSupported: boolean;
isNotificationAttentionSupported: boolean;
isPhoneNumberSharingSupported: boolean;
isSyncSupported: boolean;
isSystemTraySupported: boolean;
availableCameras: Array<
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
>;
} & Omit<MediaDeviceSettings, 'availableCameras'>;
type PropsFunctionType = {
// Other props
addCustomColor: (color: CustomColorType) => unknown;
closeSettings: () => unknown;
doDeleteAllData: () => unknown;
doneRendering: () => unknown;
editCustomColor: (colorId: string, color: CustomColorType) => unknown;
executeMenuRole: ExecuteMenuRoleType;
getConversationsWithCustomColor: (
colorId: string
) => Promise<Array<ConversationType>>;
initialSpellCheckSetting: boolean;
makeSyncRequest: () => unknown;
removeCustomColor: (colorId: string) => unknown;
removeCustomColorOnConversations: (colorId: string) => unknown;
@ -102,18 +124,6 @@ export type PropsType = {
value: CustomColorType;
}
) => unknown;
hasCustomTitleBar: boolean;
executeMenuRole: ExecuteMenuRoleType;
// Limited support features
isAudioNotificationsSupported: boolean;
isAutoDownloadUpdatesSupported: boolean;
isAutoLaunchSupported: boolean;
isHideMenuBarSupported: boolean;
isNotificationAttentionSupported: boolean;
isPhoneNumberSharingSupported: boolean;
isSyncSupported: boolean;
isSystemTraySupported: boolean;
// Change handlers
onAudioNotificationsChange: CheckboxChangeHandlerType;
@ -122,6 +132,7 @@ export type PropsType = {
onCallNotificationsChange: CheckboxChangeHandlerType;
onCallRingtoneNotificationChange: CheckboxChangeHandlerType;
onCountMutedConversationsChange: CheckboxChangeHandlerType;
onHasStoriesEnabledChanged: SelectChangeHandlerType<boolean>;
onHideMenuBarChange: CheckboxChangeHandlerType;
onIncomingCallNotificationsChange: CheckboxChangeHandlerType;
onLastSyncTimeChange: (time: number) => unknown;
@ -141,13 +152,11 @@ export type PropsType = {
onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
onZoomFactorChange: SelectChangeHandlerType<ZoomFactorType>;
availableCameras: Array<
Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
>;
// Localization
i18n: LocalizerType;
} & Omit<MediaDeviceSettings, 'availableCameras'>;
};
export type PropsType = PropsDataType & PropsFunctionType;
enum Page {
// Accessible through left nav
@ -218,6 +227,7 @@ export const Preferences = ({
hasReadReceipts,
hasRelayCalls,
hasSpellCheck,
hasStoriesEnabled,
hasTypingIndicators,
i18n,
initialSpellCheckSetting,
@ -239,6 +249,7 @@ export const Preferences = ({
onCallNotificationsChange,
onCallRingtoneNotificationChange,
onCountMutedConversationsChange,
onHasStoriesEnabledChanged,
onHideMenuBarChange,
onIncomingCallNotificationsChange,
onLastSyncTimeChange,
@ -265,12 +276,14 @@ export const Preferences = ({
selectedMicrophone,
selectedSpeaker,
setGlobalDefaultConversationColor,
shouldShowStoriesSettings,
themeSetting,
universalExpireTimer = 0,
whoCanFindMe,
whoCanSeeMe,
zoomFactor,
}: PropsType): JSX.Element => {
const storiesId = useUniqueId();
const themeSelectId = useUniqueId();
const zoomSelectId = useUniqueId();
@ -947,6 +960,39 @@ export const Preferences = ({
}
/>
</SettingsRow>
{shouldShowStoriesSettings && (
<SettingsRow title={i18n('Stories__title')}>
<Control
left={
<label htmlFor={storiesId}>
<div>{i18n('Stories__settings-toggle--title')}</div>
<div className="Preferences__description">
{i18n('Stories__settings-toggle--description')}
</div>
</label>
}
right={
<Select
id={storiesId}
onChange={value => {
onHasStoriesEnabledChanged(value === 'true');
}}
options={[
{
text: i18n('on'),
value: 'true',
},
{
text: i18n('off'),
value: 'false',
},
]}
value={String(hasStoriesEnabled)}
/>
}
/>
</SettingsRow>
)}
<SettingsRow>
<Control
left={